Blocked absolute position Z-Index

<Div class = "A" style = "position: relative;"> A (relative)
<Div class = "logo" style = "position: absolute;Z-index: 99999;"> </Div>
</Div>
<Div class = "B" style = "position: relative;"> B (relative) </div>

Recently, when I was working on the minisite project, I encountered a strange positioning problem: the above two boxes A and B are relatively located,
The logo is a sub-level of A. It is absolutely positioned based on.
Problem description: we want the logo to display on the top, but the logo part under IE is covered by Area B, and area B is displayed on the top, the value of the Z-index of the logo is invalid. It is displayed normally in Firefox.

Solution: first, let's take a look at the positioning features involved (unofficial explanation ):
1. The default Z-index value of the relative positioning element is 0.
2. When two relative positions appear at the same time, the Z-index behind the Code takes precedence.
3. The child level follows the Z-index set by the parent level. If the child level has an absolute position and a z-index set, it can break through the display of the parent level.
This problem is mainly caused by IE's explanation of the above 3rd errors-the Z-index of the sub-level in IE cannot break through the parent level. The solution to this bug on the internet is generally to use hack to make B negative, to reduce the level of B in IE. This method bypasses a large circle: When Z-index is negative, A new ie bug is generated.

According to the positioning features, this bug of IE can be avoided. On the surface, B hides the logo, but B actually hides the logo's parent level, set the Z-index of a to be greater than B.

<Div class = "A" style = "position: relative;Z-index: 1;"> A (relative)
<Div class = "logo" style = "position: absolute;"> </div>
</Div>