是否有可能在他的父元素與z索引後面有一個子元素

Question

我想知道是否有可能在他的父元素後面有一個子元素與z-index。 我想在他的內容頂部使用父級div作爲透明顏色圖層。

由於

Answer 1

不可能的，因爲每個定位元素創建一個堆疊環境。

Explanation 1，Explanation 2

Answer 2

你可以做它的其他方式，並使用兒童作爲這樣

HTML

<div id="stuff"><div class="overlay"></div> 
    <p> 
    Cras venenatis ornare tincidunt. Nam laoreet ante sed nibh pretium nec gravida turpis dapibus. Curabitur lobortis; lacus sit amet rutrum aliquet, est massa feugiat lectus, bibendum eleifend velit metus vitae dolor! Duis vulputate mi vitae quam fermentum pharetra. 
    </p> 
</div> 

CSS

#stuff{ 
    position:relative; 
    } 

.overlay{ 
    width:100%; 
    height:100%; 
    position:absolute; 
    top:0; 
    left:0; 
    background:#ACA; 
    opacity:0.4; 
    } 

Answer 3

這枚覆蓋並不一定適用於所有瀏覽器（特別是， cially舊的），下面爲我工作在過去的：

#child { 
    position: relative; 
    z-index: -1; 
    ... 
} 

我真的只是暗示這是最後的手段，仍傾向於使用除此之外的任何技術，儘管它可能是理想的在你的場景中。

Answer 4

簡短的回答是的;） 這裏有一篇很好的文章，描述如何使用元素的堆棧順序來允許z-index爲負值，以便將元素放置在它的父元素後面。

http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

Answer 5

爲什麼不呢？當然你可以，而且很容易：

1. 給你想要的元素一個非靜態位置;
2. 設置z-index的孩子到-1;
3. 創建主容器上的堆疊內容（由 z-index，opacity，transforms在其上設置或whatelse生成合成 層）。

.container { 
 
    position: absolute; 
 
    z-index: 0; /* or eg. opacity: 0.99;*/ 
 
    
 
    background-color: blue; 
 
    color: lightblue; 
 
    width: 100%; 
 
    height: 100%; 
 
    text-align: center; 
 
} 
 

 
.parent { 
 
    position: relative; 
 
    
 
    background-color: rgba(100, 255, 150, 0.75); 
 
    color: green; 
 
    width: 50%; 
 
    height: 30%; 
 
    top: 30%; 
 
    left: 20%; 
 
} 
 

 
.child { 
 
    position: absolute; 
 
    z-index: -1; 
 
    
 
    background-color: orange; 
 
    color: yellow; 
 
    width: 100%; 
 
    height: 100%; 
 
    top: -50%; 
 
    left: 20%; 
 
}

<div class="container"> 
 
    <span>container</span> 
 
    <div class="parent"> 
 
     <span>parent</span> 
 
     <div class="child"> 
 
      <span>child</span> 
 
     </div> 
 
    </div> 
 
</div>

（如果父被用作透明層，一定要使用background-image或RGBA background-color：孩子繼承父的opacity）