利用transform的bug使fixed相对于父级定位

首先，大家都清楚，元素使用fixed之后，若不设置top与left则会相对于最近的使用定位的父元素，并位于父元素的原点位置设置top与left值时，则会相对于窗口定位。但无论如何，此时仍相对于窗口定位，在此不过多描述。

今天发现的是当某一元素使用transform属性后，其所有使用fixed定位的子元素的fixed属性都会失效。此处可查看W3C文档 https://www.w3.org/TR/css-transforms-1/#issue-ca2c412c

因此可以利用此bug时fixed元素相对于父级定位，而非相对于窗口定位。

<div class="trans-box">
    <div class="outer">
        <div class="inter">div>
    div>
div>

在此需要注意，当inter元素设置top与left值时，则会相对于outer之外最近的使用定位的元素，而非相对于outer元素。有兴趣的朋友可以demo下试试。

*{
    padding: 0;
    margin: 0;
}
body{
    height: 2000px;
}
.outer{
    position: relative;
    width: 800px;
    height: 800px;
    background: #ff0;
    top: 100px;
    left: 100px;
    overflow: auto;
}
.inter{
    position: fixed;
    width: 200px;
    height: 200px;
    background:#f00;
    top: 50px;
    left: 50px;
}
.trans-box{
    width: 1000px;
    height: 1000px;
    background: #c0c0c0;
    position: relative;
    top:50px;
    left: 50px;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}

 

转载于:https://www.cnblogs.com/pomelott/p/7425650.html