css - 定位为absolute的父元素中的子元素 如何设置在父元素的下面？

Question

有一个父元素绝对定位，它有一个子元素也是绝对定位，父元素z-index大于子元素z-index，为何子元素还是在父元素的上面？如何让这个子元素放在父元素的下面。
链接 https://jsfiddle.net/wwxzw10e/

Answer 1

Thank you for the invitation~,
This kind of inclusion relationship should be like this

You can consider another way to solve the problem

两个p做同级、外面包一层父元素、根据共同的父元素定位、做层级区分就好了

Answer 2

Z-index cannot be compared between parent elements and child elements. Only z-indexes at the same level can be compared.

For example, <p id="test1"><p id="test3"></p></p> and <p id="test2"></p> The z-index of test1 and test2 at the same level can be compared, but the z-index of test2 and test3 cannot be compared no matter what, because test3 is always on the layer above test1, and only test1 and test2 can be compared

Answer 3

The parent element does not specify z-index, and the child element z-index is -1.

But this use case should be rare.

Answer 4

Thank you for the invitation.

Only when the two elements are in the same parent container, since they are in the same stacking context, it makes sense to use z-index; the parent-child relationship will only be based on the default that the child element must be on top of the parent element (regardless of Other weird situations) to render.
Of course, this is not necessarily impossible. There is another situation where the element will be at the top by default, that is, when its label is lower, something like this:

<p>我在下边</p>
<p>我在上边</p>

So sometimes it’s better to write the two tags in different positions. z-indexIt’s more suitable to show up when the “default situation” is not sure~

Above.