問題描述

有一個父元素絕對定位，它有一個子元素也是絕對定位，父元素z-index大于子元素z-index，為何子元素還是在父元素的上面？如何讓這個子元素放在父元素的下面。鏈接 https://jsfiddle.net/wwxzw10e/

問題解答

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

可以考慮換一種方式解決問題

兩個p做同級、外面包一層父元素、根據共同的父元素定位、做層級區分就好了回答2：

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

比如<p id='test1'><p id='test3'></p></p> 和<p id='test2'></p>同級test1和test2的z-index能對比，但是test2和test3的不管怎么樣都無法對比，因為test3永遠在test1上面那層，而test1和test2之間才有對比性

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

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

謝邀.

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

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

所以有時候把倆標簽換個位置寫就好了，z-index更適合出現在“默認情況”搞不定的時候兜底~

以上.