定位孩子的背後父

Question

我想它背後的父定位的子元素：

<div><p>test</p></div> 

我的CSS是：

div { 
    width: 100px; 
    height: 100px; 
    background: red; 
    z-index: 2; 
} 

div p { 
    position: relative; 
    z-index: 1; 
} 

的<p>的z-index低於它的父z-index，但它顯示在前面。這是爲什麼？

Answer 1

如果在您的情況下可行，則需要防止父級上的堆疊上下文。要做到這一點，請從您的<div/>的z-index，並設置<p/>的z-index到-1：

div { 
    width: 100px; 
    height: 100px; 
    background: red; 
    /* z-index: 2; */ 
} 

div p { 
    position: relative; 
    z-index: -1; 
} 

Answer 2

的div與本例中的p不同的堆疊上下文存在，且div的z-index它告訴給出現比其兄弟姐妹高兩級，而不是其子女。

但是，元素的z-index低於零會將其置於父元素的後面。

給p -1 z-index放p的div背後，無論div的z-index的。