position fixed的相對容器是什麼

2021-09-13 19:40:52 字數 836 閱讀 6031

請使用chrome瀏覽器敲打例子**!

長久以來,我和部分同學對css中position:fixed的理解是該元素相對螢幕視口的定位。然而並不是,以下摘要自[mdn](

position:fixed

不為元素預留空間,而是通過指定元素相對於螢幕視口(viewport)的位置來指定元素位置。元素的位置在螢幕滾動時不會改變。列印時,元素會出現在的每頁的固定位置。fixed

屬性會建立新的層疊上下文。當元素祖先的 transform 屬性非

none 時,容器由視口改為該祖先。

什麼意思呢?我們用例子來表示。

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

我是fixed元素

我是其他元素

body 

.son

.other

這個例子裡,body的滾動條滾動後,son元素的位置都是相對螢幕視口的位置。根據mdn的說明,改下**的css部分新增parent元素樣式:

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

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

引用:

position fixed失效的問題

這幾天做了乙個手機端的demo 滑動推屏的那種 在底部放了乙個div,position fixed,bottom 0.為了讓動畫效能更加,在body上加上了transform translate3d 0,0,0 然後又調了乙個js檔案,這下問題來了,本來應該懸浮在底部的div不見了!推到底,發現出現...

CSS的position fixed的使用

大家登入csdn首頁的時候會發現右下角有乙個小視窗,裡面是一些簡單的小提示,不管你如何移動滾動條,他總是在左下角的位置。用作提示或者幫助之類的非常方便。他的實現也比較簡單,用到了position fiexed這個style。position fixed在ff,ie7,opera等瀏覽器下面都支援,但...

解決position fixed 定位抖動的問題

再用position fixed 在移動端進行底部導航定位時,出現了滑動抖動的問題,用 第一種,給fixed的元素新增css的樣式,我試過,這個可以解決此閃動的問題。1 webkit transform translatez 0 可用 第二種,設定css。我是在不複雜的頁面做的測試。1html,bo...