CSS 之 posiiton：fixed 固定定位在父元素含有 tranform 属性时会失效，变成 absolute 的效果

一、简介

今天在网上看到了一条言论说：子元素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元素位置完全重叠。