Ist es möglich, ein Kind-Element hinter seinem Elternelement mit Z-Index

Question

Ich würde gerne wissen, ob es möglich ist, ein Kind-Element hinter seinem Elternelement mit Z-Index zu haben. Ich möchte das Eltern-Div als transparente Farbschicht über seinem Inhalt verwenden.

Dank

Answer 1

nicht möglich, da jedes positionierte Element ein Kontextstapel schafft.

Explanation 1, Explanation 2

Answer 2

Sie konnte es nur in die andere Richtung und verwenden Sie das Kind als Overlay wie diese

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

Während dieser würde nicht unbedingt in allen Browsern funktionieren (insb ziell ältere) hat die folgende für mich in der Vergangenheit zusammengearbeitet:

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

bin nur darauf hindeutet, ich das wirklich als letztes Mittel und nach wie vor jede andere Technik als diese zu verwenden, bevorzugen würde, obwohl es ideal sein könnte in deinem Szenario.

Answer 4

Die kurze Antwort ist Ja;) Hier ist ein ausgezeichneter Artikel, der beschreibt, wie Sie die Stapelreihenfolge von Elementen verwenden können, um den Z-Index negativ zu machen, um ein Element hinter seinem Elternelement zu platzieren.

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

Answer 5

Warum nicht? Sicher kannst du, und es ist einfach:

1. geben Sie Ihren gewünschten Elementen eine nicht-statische Position;
2. z-index des Kindes auf -1 setzen;
3. einen Stapelkontext auf dem Hauptbehälter erzeugen (indem es auf eine Einstellung z-index, opacity, transforms oder was sonst erzeugt eine zusammengesetzte Schicht).

.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>

(wenn die Eltern als transparente Schicht verwendet wird, sollten Sie eine background-image oder rgba background-color verwenden: Kinder die opacity des Mutter erben)