Warum bricht „transform: rotation()' „z-index' ab?

Z-Index durch Transformieren (Rotieren) abgebrochen

Verstehen des Verhaltens

In CSS kann die Verwendung der Transformationseigenschaft einen neuen „Stapelkontext“ erstellen " auf einem Element. Das bedeutet, dass das Element und seine untergeordneten Elemente im Renderprozess eine separate Ebene bilden. Darüber hinaus erstellen Elemente mit nicht standardmäßigen Z-Index-Werten auch ihre eigenen Stapelkontexte.

Erklärung des Problems

Im bereitgestellten Code hat das .test-Element die Transformation: rotation(10deg);, wodurch ein Stapelkontext entsteht. Anschließend wird dem Pseudoelement .test:after der Z-Index: -1 zugewiesen. Dadurch wird es jedoch nicht hinter .test platziert.

Grund

Z-index arbeitet in einem Stapelkontext. Durch das Setzen von -webkit-transform auf .test wird ein neuer Stapelkontext für das Element und seine untergeordneten Elemente erstellt. Daher wirkt sich z-index: -1 für .test:after nur auf seine Position innerhalb des .test-Stapelkontexts aus.

Lösung

Um dieses Problem zu lösen, stellen Sie sicher, dass sowohl .test als auch .test:nachher den gleichen Stapelkontext teilen. Eine Möglichkeit, dies zu erreichen, besteht darin, .test in einen Verpackungsbehälter zu legen und stattdessen den Behälter zu drehen.

Beispiel

Hier ist der aktualisierte Code:

.wrapper {
  -webkit-transform: rotate(10deg);
}

.test {
  width: 150px;
  height: 40px;
  margin: 30px;
  line-height: 40px;
  position: relative;
  background: white;
}

.test:after {
  width: 100px;
  height: 35px;
  content: "";
  position: absolute;
  top: 0;
  right: 2px;
  -webkit-box-shadow: 0 5px 5px #999;
  -webkit-transform: rotate(3deg);
  transform: rotate(3deg);
  z-index: -1;
}

<div class="wrapper">
  <div class="test">z-index is canceled.</div>
</div>

In diesem Beispiel , wird die Transformationsrotation auf den .wrapper-Container angewendet, wodurch ein einzelner Stapelkontext für .test und .test:after erstellt wird. Dadurch kann z-index: -1 auf .test:after wie erwartet wirksam werden.

Das obige ist der detaillierte Inhalt vonWarum bricht „transform: rotation()' „z-index' ab?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!