利用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);
}