position fixed的相對容器是什么

Miracle_lihb 發布于2019-08-29 15:16 / 2700人閱讀

摘要：然而并不是，以下摘要自不為元素預留空間，而是通過指定元素相對于屏幕視口的位置來指定元素位置。當元素祖先的屬性非時，容器由視口改為該祖先。然而，滾動的滾動條，元素并沒有按照想象中那樣固定在容器的一個位置上，而是表現為的效果。

請使用chrome瀏覽器敲打例子代碼！

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

position:fixed
不為元素預留空間，而是通過指定元素相對于屏幕視口（viewport）的位置來指定元素位置。元素的位置在屏幕滾動時不會改變。打印時，元素會出現在的每頁的固定位置。fixed
屬性會創建新的層疊上下文。當元素祖先的 transform  屬性非
none 時，容器由視口改為該祖先。

什么意思呢？我們用例子來表示。

下面的例子是元素相對body的定位：


    
        我是fixed元素
    
    
        我是其他元素

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

這個例子里，body的滾動條滾動后，son元素的位置都是相對屏幕視口的位置。根據MDN的說明，改下代碼的css部分添加parent元素樣式:

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

這個時候，會發現滾動body的滾動條的時候，son元素跟著parent一起走了。然而，滾動parent的滾動條，son元素并沒有按照想象中那樣固定在parent容器的一個位置上，而是表現為absolute的效果。(這樣就不能做我們心愛的吸頂效果了)。

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

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113213.html

position 的屬性值

摘要：注意當該固定元素的祖先元素的屬性非時，容器由瀏覽器窗口改為該祖先元素粘性定位，相當于相對定位和固定定位的混合。粘性定位根據一個閾值決定，在大于等于閾值時采用相對定位，小于閾值后則為固定定位。理論上來說，全部 position 的取值有8個包括：position：static | relative | absolute | fixed | sticky | initial | inherit...

番茄西紅柿 2019-04-23 13:30 評論0 收藏0
CSS Position（定位）

摘要：定位的起始位置為此元素原先在檔流的位置。忽略和從父元素繼承該屬性的值以上的和可以使得元素脫離文檔流。絕對定位脫離檔流的布局，遺留下來的空間由后的元素填充。默認定位表示此元素為默認定位式。 Position（定位） position可以取五個值參數描述 absolute 絕對定位；脫離?檔流的布局，遺留下來的空間由后?的元素填充。定位的起始位置為最近的?元素(postio...

lpjustdoit 2019-08-29 18:39 評論0 收藏0
滾動視差？CSS 不在話下

摘要：可以感受下種不同取值的不同效果使用實現滾動視差首先，我們使用來實現滾動視差。何為滾動視差視差滾動（Parallax Scrolling）是指讓多層背景以不同的速度移動，形成立體的運動效果，帶來非常出色的視覺體驗。作為網頁設計的熱點趨勢，越來越多的網站應用了這項技術。通常而言，滾動視差在前端需要輔助 Javascript 才能實現。當然，其實 CSS 在實現滾動視差效果方面，也有著不俗...

RobinTang 2019-04-23 13:29 評論0 收藏0
CSS粘性定位是怎樣工作的

摘要：怎樣才能讓粘性定位起作用粘性定位有兩個主要部分，粘性元素和粘性容器。這是粘性元素可以浮動的最大區域。最好是在以粘性容器底部為自然位置的元素上使用它。翻譯：瘋狂的技術宅原文：https://medium.com/@elad/css-... 本文首發微信公眾號：jingchengyideng歡迎關注，每天都給你推送新鮮的前端技術文章瀏覽器對 CSS粘性定位有著非常好的支持，但很多...

Wildcard 2019-08-30 15:55 評論0 收藏0
CSS粘性定位是怎樣工作的

摘要：怎樣才能讓粘性定位起作用粘性定位有兩個主要部分，粘性元素和粘性容器。這是粘性元素可以浮動的最大區域。最好是在以粘性容器底部為自然位置的元素上使用它。翻譯：瘋狂的技術宅原文：https://medium.com/@elad/css-... 本文首發微信公眾號：jingchengyideng歡迎關注，每天都給你推送新鮮的前端技術文章瀏覽器對 CSS粘性定位有著非常好的支持，但很多...

lovXin 2019-08-02 14:14 評論0 收藏0