position:fixed wird normalerweise relativ zum Fenster positioniert, aber in einem Fall wird position:fixed relativ zum Vorgängerelement positioniert, und die Positionierungsebene (Z-Index) ist zu diesem Zeitpunkt auch relativ zum Vorgängerelement.
In diesem Fall wird das Vorfahrenelement transformiert, d. h. das Transfrom-Attribut wird geändert.
Beispiel:
<div class='parent'>
<div class='child'>我固定了吗？</div>
</div>
<div class='parentSibling'>
</div>Entsprechender CSS-Stil
.parent{
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
background: #6699FF;
animation: move 4s cubic-bezier(0.4,0,0.6,1) infinite;
position:absolute;
left:0px;
z-index:100;
}
.child{
position: fixed;
top: 20px;
left: 20px;
width: 200px;
height: 200px;
background: #9966FF;
color:#FFF;
z-index:300;
}
.parentSibling{
position:fixed;
background:red;
height:100px;
width:100px;
bottom:10px;
left:100px;
z-index:150;
}
@keyframes move{
0% {transform:translateX(10px);}
50% {transform:translateX(50px);}
100% {transform:translateX(10px);}
}
Wenn zu diesem Zeitpunkt die Animationseigenschaft des übergeordneten Elements nicht berücksichtigt wird, sollte das untergeordnete Element relativ zum Fenster positioniert werden, dies ist jedoch nicht der Fall. Zu diesem Zeitpunkt wird das untergeordnete Element relativ zum übergeordneten Element positioniert, und da der Z-Index von Das übergeordnete Element ist 100, der Z-Index von .parentSibling ist 150. Zu diesem Zeitpunkt befindet sich parentSibling in der oberen Ebene des untergeordneten Elements
Wie im Bild gezeigt:
Gründe für dieses Phänomen:
Wenn das Transformationsattribut des Vorfahren des Elements nicht „none“ ist, wird der Positionierungscontainer vom Ansichtsfenster zum Vorfahren geändert, der sich nicht auf das übergeordnete Element, sondern auf das Komponentenelement bezieht.
Das Prinzip des Transformationseinflusses:
In der Spezifikation ist festgelegt: Wenn der Transformationswert eines Elements nicht „none“ ist, generiert das Element einen enthaltenden Block und einen Stapelkontext.
Original: https://www.w3.org/TR/css-transforms-1/#issue-ca2c412c
Dieses Modul definiert eine Reihe von CSS-Eigenschaften, die sich auf die visuelle Darstellung von Elementen auswirken, auf die diese Eigenschaften angewendet werden. Diese Effekte werden angewendet, nachdem die Größe und Positionierung der Elemente gemäß dem visuellen Formatierungsmodell von [CSS2] angepasst wurde . Einige Werte dieser Eigenschaften führen zur Erstellung eines umschließenden Blocks und/oder zur Erstellung eines Stapelkontexts .
Die Auswirkung des Transstorm-Attributs auf gewöhnliche Elemente
1. Die Transformation verbessert die vertikale Position des Elements
Beispiel: https://www.zhangxinxu.com/study/201505/css3-transform-cover.html
2. Die Transformation schränkt den folgenden Effekt von position:fixed ein
Beispiel oben
3. Transformation ändert die Beschränkung des Überlaufs auf absolute Elemente
Beispiel: https://www.zhangxinxu.com/study/201505/css3-transform-overflow.html
4. Die Transformation begrenzt die absolute Breite auf 100 %
Beispiel: https://www.zhangxinxu.com/study/201505/css3-transform-absolute-percent-100.html
5. Unter dem Mac-Safari-Browser kann durch die Verwendung das Problem vermieden werden, dass sich die Dicke der Textwiedergabe transform: translate3d(0,0,0) mit anderen Elementen transitionoder wann ändertanimation