Warum "z-index" funktioniert nicht für Element-Transformation mit: translateY()

Question

Unten ist der Code-Schnipsel:

.up { 
 
    background-color: red; 
 
    height: 100px; 
 
    z-index: 100; 
 
} 
 
.down { 
 
    background-color: yellow; 
 
    height: 100px; 
 
    width: 50%; 
 
    margin: 0 auto; 
 
    z-index: 1; 
 
    transform: translateY(-50%); 
 
}

<div class="up"></div> 
 
<div class="down"></div>

Wie man sehen kann, das .up Element hat eine höhere z-index als .down Element. Das .down Element befindet sich jedoch immer noch vor dem Element .up ..

Hat jemand Ideen dazu? Wie behebe ich das?

Answer 1

1. Für z-indexposition arbeiten müssen absolute, relative oder fixed angewendet werden. Fügen Sie position: relative; dem .down Element hinzu
2. Da es keine Parent-Child-Hierarchie gibt, sollte negative z-index angewendet werden, um das Element hinter zu gehen.

Demo

.up { 
 
    background-color: red; 
 
    opacity: .5; /* For DEMO Purpose */ 
 
    height: 100px; 
 
    /* z-index: 100; /* Not required. Not work #1 */ 
 
} 
 
.down { 
 
    background-color: yellow; 
 
    height: 100px; 
 
    width: 50%; 
 
    margin: 0 auto; 
 
    z-index: -1; /* Update this */ 
 
    transform: translateY(-50%); 
 
    position: relative; /* Add this */ 
 
}

<div class="up"></div> 
 
<div class="down"></div>

Answer 2

Note: z-Index funktioniert nur positionierte Elemente auf (Position: absolute, Position: relative oder Position: fest).

hinzufügen position:relative-.up Klasse

.up { 
 
    background-color: red; 
 
    height: 100px; 
 
    z-index: 100; 
 
    position: relative; 
 
    opacity: .5; 
 
} 
 
.down { 
 
    background-color: yellow; 
 
    height: 100px; 
 
    width: 50%; 
 
    margin: 0 auto; 
 
    transform: translateY(-50%); 
 
}

<div class="up"></div> 
 
<div class="down"></div>

Answer 3

Denken Sie auch daran, dass Elemente mit nicht-statischer Positionierung werden immer oben auf Elemente mit Standard-statischer Positionierung angezeigt.

Während Sie mit zwei Elementen arbeiten, können Sie die Werte 0, 1 oder -1 verwenden. Verkomplizieren Sie sich nicht mit höheren Werten.

Answer 4

Die Reihenfolge der Elemente ist described in W3 specs in detail.In Ihrem Beispiel:

• z-index hat keine Wirkung, da keines der Elemente
• rotes Feld ist ein In-Flow, nicht-positionierte, Blockelement angeordnet ist, so ist es gemalt erst
• The gelbe Box ist ein Nachkomme verwandeln, so dass es sogar über gemalt wird, wenn Sie das HTML-Code, um

ändern, um die Elemente in der gewünschten Reihenfolge stapeln Sie die Position Eigenschaft verwenden muss:

.up { 
 
    background-color: red; 
 
    height: 100px; 
 
    /* http://www.w3.org/TR/css3-positioning/#painting-order, section 9 */ 
 
    position: relative; 
 
    z-index: 1; 
 
} 
 
.down { 
 
    background-color: yellow; 
 
    height: 100px; 
 
    width: 50%; 
 
    margin: 0 auto; 
 
    /* http://www.w3.org/TR/css3-positioning/#painting-order, section 8.3 */ 
 
    transform: translateY(-50%); 
 
}

<div class="up"></div> 
 
<div class="down"></div>