html5 - 可以让z-index不管多小，子元素总是显示在父元素之上吗

Question

就是 子元素 的 z-index 小于父元素时，仍然显示在 父元素 上面

Answer 1

To set the z-index of the container, the p positioning must be absolute positioning
The following is the W3C standard:

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
注释：元素可拥有负的 z-index 属性值。
注释：Z-index 仅能在定位元素上奏效（例如 position:absolute;）！

Obviously since the questioner asked this question, the positioning should have been set up. I don’t know if what I said is right

If you only need to display the child element on top of the parent element, just use positioning without z-index. Isn’t that enough?

If you have set up z-index then you cannot solve this problem through positioning

Answer 2

Just specify a static value that is not position, and a auto value that is not z-index for the parent element.

Answer 3

The parent element position:relative;z-index:1, the child element position:absolute;z-index:10, you can make the child element above the parent element

Answer 4

1. Parent-child elements do not need to add any positioning attributes, and children will always be displayed above their parents.
2.1. If you add positioning attributes, the parent sets position: relative; z-index is not set, and the child sets position: absolute; z-index: (0-infinity); the z-index of the child must be greater than the parent Level z-index. Because the parent generally defaults to z-index of 0 or auto.
2.2. If the parent sets position: relative;z-index: any value; the child sets position: absolute;z-index: any value. It can also be achieved that when the z-index of the child element is smaller than the parent element, it will still be displayed on the parent element, but obviously this does not make any sense, and the z-index of the child can be completely omitted.

Answer 5

1- Without z-index, the child level should be naturally above the parent level;
2- The situation is the same as above, for sibling elements at the same level, the ones with lower writing order are on top;
3- Give an example Simple example:

<p id="boxA">
    <p id="boxB"></p>
</p>
<p id="boxC"></p>

Hierarchical relationship #boxC>#boxB>#boxA
4- Personally, I think z-index is more suitable for adjusting individual hierarchical relationships. Using too much can easily lead to confusion. So if there is a problem, it is recommended to try to remove the z-index first, and then adjust the label position.