我遇到了一些非常奇怪的行爲，並且在我測試的每個瀏覽器中都不一致。CSS：位置：固定在位置：絕對

我有一個相當複雜的佈局，但主要的問題就出在這裏：

<div id="drop"> 
    <div id="header"></div> 
</div>

#drop有position:absolute和z-index:100
#header有position:fixed; top:60px;

正如我開始向下滾動瀏覽器會忽略position:fixed規則。如果我從#drop中刪除或以上兩種樣式，則Chrome開始遵守position:fixed規則。

無法在Ubuntu Chrome 23.0.1271.97上運行，並在Mac Chrome 25.0.1364.99上看到相同的行爲。我的朋友使用Ubuntu Chrome 25.0.1364.68測試版，它對他來說工作正常。我已經測試了它在Firefox上，它有點（有其他症狀）

有沒有人聽說過這個錯誤？或者任何人都可以重現它？

編輯

我使用的OpenLayers地圖與position:fixed另一格，如果我刪除層或至少將其更改爲display:none那麼這個奇怪的錯誤就會消失。

編輯

注意到了這個bug的存在時，如果我改變縮放級別來回，則位置自行調整至適當的行爲。對我而言，這表示webkit問題無法在滾動中執行某些內部回調函數。

另一個非常奇怪的是，我有#header裏面的幾個鏈接，他們工作，如果我只是點擊預期的位置，即使div沒有出現在那裏。總體來說我注意到它只是渲染已經壞了。如果在任何時候我強制瀏覽器通過調整窗口大小或改變縮放比例來重新渲染，或者只是選擇全部，那麼標題欄會跳轉到正確的位置，但不會保持不變。

來源

2013-03-01 Mikhail

您是否在爲固定元素設置位置值？即頂部：0;左側：0; ？ – lukeocom 2013-03-01 08:26:06

是的，很抱歉沒有提到它。我有'頂部：60px;'在固定的。將更新OP。 – Mikhail 2013-03-01 17:33:49

我以前沒有遇到過這個問題，也不能重現它。http://jsfiddle.net/be53j/ – lukeocom 2013-03-05 02:07:13

-5

首先，把東西放在你的div中，因爲空的東西真的很奇怪。那麼，通過將fixed加入absolute，你期望什麼？顯然，沒有人知道你的fixed div的參考點是什麼。它應該成爲其父母的地位嗎？哪個不會隨着滾動或頁面位置的變化而改變？嘗試使用完全有意義並且定義明確的事物，因爲如果您使用chrome修復它，另一個瀏覽器會發生什麼情況？你真的喜歡測試所有的人嗎？

我想在你的div秒的微小變化，從而拉動fixed DIV出absolute一個或別的地方移動absolute股利。

來源

2013-03-01 08:28:45 Sheric

在OP中，我只顯示了DOM，而不是內容。每個div中都有子標籤和文本。 'fixed'不需要參考點。所有規範都聲明它引用了瀏覽器窗口。下一次請在請求更多信息時使用評論而不是答案。 – Mikhail 2013-03-01 17:32:59

您必須將header放在父容器drop的外面才能使其正常工作。

我幾天前有點類似的問題。舉例來說，如果你設置的header的z-index，這將是實現的header父drop container.The的z-index的z-index的將是無用的，因爲它已經具有另一個z-index的容器內。

z索引的同樣的邏輯適用於位置。

來源

2013-03-06 12:16:40 Michel

它有點合理，但如果它和你說的一樣準確，那麼OpenLayers不會對此產生任何影響。如果我刪除OpenLayers（它是所有div之外的），那麼我的'header'按預期開始工作。 – Mikhail 2013-03-07 05:58:51

您在評論中提到的OpenLayers使用CSS變換。既然如此：

與固定定位的元素將成爲相對於與該元素的變換 - 不相視

看一看規範：The Transform Rendering Model

指定比爲「變換」屬性「無」以外的值，在它被施加到元件建立一個新的本地座標系。

看這個FIDDLE在WebKit的瀏覽器中看到這個動作

<div class="wpr"> 
    <div class="fixed"></div> 
</div> 

.wpr 
{ 
    width: 200px; 
    height:1000px; 
    background: pink; 
    position:relative; 
    margin: 0 200px; 
    -webkit-transform: translateX(0); 
    transform: translateX(0); 
} 
.fixed 
{ 
    width: 200px; 
    height:200px; 
    margin: 50px; 
    position: fixed;  
    top:0; 
    left:0; 
    background: aqua; 
}

來源

2013-12-29 21:46:20 Danield

你剛剛從可能的最糟糕的噩夢中救了我:)，我使用引導詞綴，並且也使用父容器上的變換，我將擺脫變換並使用jquery動畫:) – ndd 2015-04-09 14:54:40

感謝您的這一點，只是想補充一點'will-change：transform'會觸發這種行爲（在最新的chrome中） – schellmax 2016-09-06 13:05:06

我要添加另一種可能的解決方案，因爲我是用鍍鉻忽略的位置掙扎：固定的相當長的一段時間，直到我終於發現罪魁禍首：

-webkit-perspective: 1000;

它來自我使用的插件，並導致所有位置：固定的元素被忽略。希望它可以幫助別人。

來源

2015-01-06 22:42:49 parliament

正如接受的答案所說，這是預期的行爲，並符合規範。這個的另一個重要組成部分是使用CSS轉換的意思。

在你的情況，這是由於OpenLayers，但這也適用於任何人使用will-change: transform以及（可能很多人訪問此問題）。這已經在Chromium bug追蹤器here上提出，並且標記爲WontFix，因爲（正如我所說）它是有意的行爲。官方評論是這樣的：

此行爲是由規範（http://dev.w3.org/csswg/css-will-change/）必需的：「如果一個屬性的任何非初始值將導致產生用於在固定位置的元素的含塊的元件，指定將改變的屬性必須使該元素爲固定位置元素生成一個包含塊。「

這個想法是，一旦指定了變換：你應該能夠便宜地添加/移除/改變變換，而不需要固定位置的後代重新佈局。

請注意，使用其他值will-change（例如opacity，top）將不會改變固定位置後代的位置。

據我所知，唯一的解決辦法是讓孩子will-change元素一個兄弟代替，防止屬性的級聯。

作爲一個便箋，在我的具體情況下，我可以通過更具體的will-change屬性來修復它。我不是在包含需要GPU卸載的性能震盪元素的div上使用它，而是直接在違規元素上使用它。這是由於我的原始錯誤代碼，所以它不適用於大多數情況。

來源

2016-04-19 22:59:41 forresthopkinsa

CSS：位置：固定在位置：絕對

編輯

編輯

回答

相關問題