一、简介
今天在网上看到了一条言论说:子元素posiiton:fixed 固定定位在父元素含有 tranform 属性时会失效,变成 absolute 的效果。虽然这个场景,我还没有在实际工作中用到过,但本着多学多记、有备无患的原则,我决定用代码验证一下,并用博客记录下来。
先说结论: 子元素设置 posiiton:fixed 固定定位,在父元素含有 tranform 属性时确实会失效,变成 absolute 的效果。也就是说其定位的参考对象从浏览器窗口变成了其父元素。
推测原因: 我一开始认为是因为父元素设置 tranform
属性后,就创建了一个新的BFC(块格式上下文),该元素内部的样式相对独立,所以子元素的fixed
定位,才会以父元素为参照对象。但是经过实验,其他可以创建BFC的样式却不会导致这种特性,说明还跟tranform
某些特性有关。
浏览器限制: 经过我的测试,这个特性表现,目前在大部分主流浏览器中存在(Chrome、FireFox、Safari、Edge、猎豹、搜狗、360浏览器),在IE和2345浏览器中,fixed还是fixed的表现。
二、实例代码
初始代码:
<style>
.father {
width: 200px;
height: 200px;
background-color: antiquewhite;
}
.son1 {
position: fixed;
top: 50px;
left: 208px;
width: 100px;
height: 100px;
background-color: #ccc;
}
.son2 {
position: absolute;
top: 50px;
left: 208px;
width: 100px;
height: 100px;
background-color: green;
}
</style>
<body>
<div class="father">
father
<div class="son1">
son1
</div>
<div class="son2">
son2
</div>
</div>
</body>
页面效果:
注: 此时两个子元素,一个设置fixed
定位,另一个设置absolute
定位,因为定位方式不同,所以哪怕top
和left
的值相同,位置也不会相同。
给父元素增加transform
属性后的代码:
<style>
.father {
/* transform属性的三种效果 translate、scale、rotate 都会触发这种效果 */
transform: translateX(0px);
/* transform: scale(1); */
/* transform: rotate(0); */
width: 200px;
height: 200px;
background-color: antiquewhite;
}
.son1 {
position: fixed;
top: 50px;
left: 208px;
width: 100px;
height: 100px;
background-color: #ccc;
}
.son2 {
position: absolute;
top: 50px;
left: 208px;
width: 100px;
height: 100px;
background-color: green;
}
</style>
<body>
<div class="father">
father
<div class="son1">
son1
</div>
<div class="son2">
son2
</div>
</div>
</body>
页面效果:
注: 因为父元素增加了transform
属性,所以子元素设置的fixed
定位失效,变成absolute
定位的效果,再加上son1和son2两个元素的top
和left
的值相同,所以son1元素与son2元素位置完全重叠。