关于z-index层级优先级问题

在项目中遇到一个bug就是当点击某项出现下拉框时，点击除下拉框的任意处关闭下拉框，实现逻辑是出现下拉框的时候出现一个全屏的透明蒙层，这个蒙层的使用固定定位，z-index也设置到了999但是却发现右边的操作按钮的层级却要比这个全屏蒙层还要高，而这个操作按钮仅仅设置了一个相对定位而且也没有设置z-index。

然后尝试着去掉操作按钮的相对定位发现是解决了操作按钮层级比蒙层还要高的问题，但是却一直不知道其原因。
直到在网上找了一通发现，z-index还有一个规则
从父（祖先）规则
如果 A, B 节点都定义了 position, B节点的 z-index 比 A节点大, 那么 B的子节点必定覆盖在 A的子节点前面.
例如下图中的第一个框是蒙层和下拉框的祖先元素A，第二个框是操作按钮元素B，类pr就是相对定位。A使用了相对定位，并且z-index:0从而导致A层级没有B的高，因为B没设置z-index那它的默认值就是auto，而auto层级比0高，根据从父（祖先）规则，虽然蒙层的层级比操作按钮高但是因为蒙层的祖先元素A层级没有B，所以的操作按钮必定覆盖在蒙层上。

解决：知道原因后，就知道解决方法了即把蒙层和下拉框的祖先元素A中的z-index层级设置的比操作按钮高即可。