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