position:fixed is usually positioned relative to the window, but in one case, position:fixed is positioned relative to the ancestor element, and the positioning level (z-index) at this time is also relative to the ancestor element.
In this case, the ancestor element is transformed, that is, the transfrom attribute is changed.
Example:
<div class='parent'>
<div class='child'>我固定了吗？</div>
</div>
<div class='parentSibling'>
</div>Corresponding css style
.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);}
}
At this time, if the animation property of the parent is not considered, the child should be positioned relative to the window, but it is not. At this time, the child is positioned relative to the parent, and since the z-index of the parent is 100, the z-index of .parentSibling is 150. At this point parentSibling is in the upper layer of child
As shown in the picture:
Reasons for this phenomenon:
When the transform attribute of the ancestor of the element is not none, the positioning container is changed from the viewport to the ancestor, which does not refer to the parent element, but the component element.
The principle of transform's influence:
It is stipulated in the specification: If the transform value of an element is not none, the element will generate a containing block and a stacking context.
Original: https://www.w3.org/TR/css-transforms-1/#issue-ca2c412c
This module defines a set of CSS properties that affect the visual rendering of elements to which those properties are applied; these effects are applied after elements have been sized and positioned according to the visual formatting model from [CSS2]. Some values of these properties result in the creation of a containing block, and/or the creation of a stacking context.
The effect of the transstorm attribute on ordinary elements
1, transform enhances the vertical position of the element
Example: https://www.zhangxinxu.com/study/201505/css3-transform-cover.html
2, transform restricts the following effect of position:fixed
example above
3. transform changes overflow's restriction on absolute elements
Example: https://www.zhangxinxu.com/study/201505/css3-transform-overflow.html
4, transform limits the 100% width of absolute
Example: https://www.zhangxinxu.com/study/201505/css3-transform-absolute-percent-100.html
5. Under the mac safari browser, using it can avoid the problem that the thickness rendering of text changes transform: translate3d(0,0,0) with other elements transitionor whenanimation