不失效举例:
此时你会发现父元素只写了一个 position: relative;
此时,你会发现,子元素主动把 window 窗口作为参照对象定位了
<div class="wrap">
<div class="inner"></div>
</div>
.wrap {
width: 500px;
height: 500px;
margin: 200px auto;
border: 1px solid #000;
position: relative;
}
.inner {
width: 100px;
height: 100px;
background: red;
position: fixed;
left: 200px;
top: 0;
}
失效举例
父元素减少 transform: translate(0,0);
此时,你会发现,子元素主动把父元素作为参照对象定位了
<div class="wrap">
<div class="inner"></div>
</div>
.wrap {
width: 500px;
height: 500px;
margin: 200px auto;
border: 1px solid #000;
position: relative;
transform: translate(0,0);
}
.inner {
width: 100px;
height: 100px;
background: red;
position: fixed;
left: 200px;
top: 0;
}