position fixed的相對(duì)容器是什么

Miracle_lihb 發(fā)布于2019-08-29 15:16 / 2704人閱讀

摘要：然而并不是，以下摘要自不為元素預(yù)留空間，而是通過(guò)指定元素相對(duì)于屏幕視口的位置來(lái)指定元素位置。當(dāng)元素祖先的屬性非時(shí)，容器由視口改為該祖先。然而，滾動(dòng)的滾動(dòng)條，元素并沒(méi)有按照想象中那樣固定在容器的一個(gè)位置上，而是表現(xiàn)為的效果。

請(qǐng)使用chrome瀏覽器敲打例子代碼！

長(zhǎng)久以來(lái)，我和部分同學(xué)對(duì)css中position:fixed的理解是該元素相對(duì)屏幕視口的定位。然而并不是，以下摘要自[MDN](
https://developer.mozilla.org...:

position:fixed
不為元素預(yù)留空間，而是通過(guò)指定元素相對(duì)于屏幕視口（viewport）的位置來(lái)指定元素位置。元素的位置在屏幕滾動(dòng)時(shí)不會(huì)改變。打印時(shí)，元素會(huì)出現(xiàn)在的每頁(yè)的固定位置。fixed
屬性會(huì)創(chuàng)建新的層疊上下文。當(dāng)元素祖先的 transform  屬性非
none 時(shí)，容器由視口改為該祖先。

什么意思呢？我們用例子來(lái)表示。

下面的例子是元素相對(duì)body的定位：


    
        我是fixed元素
    
    
        我是其他元素

body {
    height: 2000px;
}
.son {
    position: fixed;
    left: 100px;
    top: 100px;
    width: 100px;
    height: 100px;
    background: #f00;
}
.other {
    height: 1000px;
}

這個(gè)例子里，body的滾動(dòng)條滾動(dòng)后，son元素的位置都是相對(duì)屏幕視口的位置。根據(jù)MDN的說(shuō)明，改下代碼的css部分添加parent元素樣式:

.parent {
    margin-top: 100px;
    height: 500px;
    overflow-y: auto;
    background: #ff0;
    transform: translate(0,0);
}

這個(gè)時(shí)候，會(huì)發(fā)現(xiàn)滾動(dòng)body的滾動(dòng)條的時(shí)候，son元素跟著parent一起走了。然而，滾動(dòng)parent的滾動(dòng)條，son元素并沒(méi)有按照想象中那樣固定在parent容器的一個(gè)位置上，而是表現(xiàn)為absolute的效果。(這樣就不能做我們心愛(ài)的吸頂效果了)。

整個(gè)例子下來(lái)，就總結(jié)出一句：這不是蛋疼嗎？既然fixed在transform里變成了absolute的行為，為毛transform還要去影響fixed呢？

引用：
https://developer.mozilla.org...
http://www.zhangxinxu.com/wor...