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

Question

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

Answer 1

謝邀~、
這樣的包含關係就應該是這樣的吧

可以考慮換個方式解決問題

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

Answer 2

父元素與子元素之間，z-index是無法對比的，同級之間的z-index才能對比，

如

和

同等級
test1和test2的z-index能對比，但是test2和test3的不管怎麼樣都無法對比，因為test3永遠在test1上面那層，而test1和test2之間才有對比性

Answer 3

父元素不指定 z-index, 而子元素 z-index 為 -1.

但這個使用場景應該是很少的.

Answer 4

謝邀.

倆元素只有在同一個父容器裡的時候，由於是在同一個堆疊上下文裡，使用z-index才有意義；父子關係只會按照默認的子元素一定會在父元素上邊（不考慮其他奇葩情況）來渲染。
當然這也不是一定沒轍，還有一種情況元素會默認在上邊，就是它的標籤靠下的時候，類似這種：

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

所以有時候把倆標籤換個位置寫就好了，z-index比較適合出現在「預設」搞不定的時候兜底~

以上.