Haben CSS-transformierte Elemente den Standard-Z-Index?

Ich habe ein ziemlich einfaches Beispiel hier, habe eine feste Überschrift mit anderen Elementen, die nacheinander gestapelt werden, einzelnes Element wird mit transform: rotate(360deg) umgewandelt.Haben CSS-transformierte Elemente den Standard-Z-Index?

Also nur das transformierte Element wird über die feste Leiste, wenn die Seite gescrollt wird, wo andere Elemente nicht. Also die Frage ist, haben transformierte Elemente standardmäßig z-index?

Wenn Sie z-index: -1; für .transform_me verwenden verhält es normal

Demo

CSS

.fixed { 
    height: 30px; 
    background: #f00; 
    position: fixed; 
    width: 100%; 
    top: 0; 
} 

.transform_me { 
    transform: rotate(360deg); 
    -webkit-transform: rotate(360deg); 
} 

span { 
    display: block; 
    height: 100px; 
}

Hinweis: Es wird gelöst werden, wenn wir sagen, verwenden z-index: 999; für den festen div, b Aber das ist nicht was ich suche.

Quelle

2013-05-08 Mr. Alien

Jeder positive Wert für 'Z-Index' einschließlich ** 1 ** wird es beheben, aber wie Sie sagten, es scheint, wie es bekommt seine eigene Ebene, aber es ist kleiner als' Z-Index: 1'? +1 –

@JEES Ich weiß nicht, das ist lustig, ich meine, was passiert, wenn ich zahlreiche transformierte Elemente habe, muss ich 'Z-Index' für jeden ändern, ich möchte wissen, warum dies passiert –

Es wäre eine große Sauerei, in [Dieser Link] (http://dev.opera.com/articles/view/css3-transitions-and-2d-transforms/#transforms) aus der Oper sagt es - * Beachten Sie, dass eine Transformation nicht den Fluss des Dokuments beeinflussen. Wenn das Element also dorthin verschoben wird, wo ein anderes Element bereits positioniert ist, überlagert es dieses Element und nicht den Inhalt, der darunter oder darunter fließt. Elemente später im Dokument werden auch nicht den Platz einnehmen, der durch das transformierte Element frei gemacht wurde. - –

Für Elemente, deren Layout durch die CSS-Box-Modell bestimmt ist, einen anderen Wert als none für die transform Ergebnisse in die Schaffung sowohl eines Stapelkontext und einem umschließenden Block. Das Objekt fungiert als umgebender Block für fest positionierte Nachkommen.

Von der specification.

Stacking context.

Quelle

2013-05-08 06:50:18 Ana

Soll ich 'z-index: -1;' für alle transformierten Elemente verwenden? –

würde ich einfach '.fixed' einen positiven' z-index' geben. – Ana

Jetzt wird CSS immer dreckiger, trotzdem danke .. –

Haben CSS-transformierte Elemente den Standard-Z-Index?

Antwort

Verwandte Themen