1. The first to use the z – index need to add the position: absolute/relative positioning
I’m not going to write any code here, but I’m going to draw it
123 If all three boxes are brothers and have positioning, box 2 will go to the top with Z-index set
2. Add the z-index to the gray box and the green box to create a stack context.
If you set the yellow box’s Z-index to whatever it is, it doesn’t affect the outside world, the parent element has z-index, and its son, z-index, doesn’t affect the outside world
3. Then you need to know that the z-index takes into account the parent. If the z-index of the child is 0, then the parent will not cover the child even if it is 200000. Here’s why:
In standard browsers, the requirements for the parent level are not particularly high, the sibling of the z-index can be used. However, it is important to note that if a child is placed in the parent, the parent cannot be placed above the child, it must be placed in the same level.