css「固定」子元素相對於父元素的位置不是視口，爲什麼？

我正在開發一個WordPress的主題，與同位素網格和懸停在一個職位應顯示其標題與瀏覽器底部的固定位置。我有這樣的簡化結構：css「固定」子元素相對於父元素的位置不是視口，爲什麼？

<div id="main"> 
    <article class="hubbub"> 
     //article content 
    <h2 class="subtitled"> 
     //h2 content 
    </h2> 
    </article> 
</div>

通過jQuery，在<article>懸停應顯示其子元素h2.subtitled。 <article>是相對位置，但通過同位素腳本獲得絕對位置。所述h2.subtitled被定位固定有：

.subtitled { 
      display: none; 
      position: fixed; 
      z-index: 999999999; 
      bottom: 20px; 
      left: 0; 
      width: 100%; 
      font-family: Arial, Helvetica, sans-serif; 
      font-size: 42px; 
      text-align: center; 
      color: yellow; 
}

出於某種原因，該h2.subtitle元件得到定位的固定相關的父<article>元件，每個<article>的因此一個底部。如果我將<h2>設置在<article>之外，則其位置與瀏覽器相關，但它們需要位於<article>元素的內部，因爲無限滾動會附加新的<article>元素，並且它們也應該包含<h2>標題。

有誰知道，如何使這個位置固定並與瀏覽器窗口相關？

謝謝！

來源

2014-01-13 R4ttlesnake

位置'fixed'總是atach有關的元素，以視，所以你也許有另一個腳本或CSS覆蓋固定位置 – DaniP

是啊，我打同樣的事情。儘管有相反的保證，「position：fixed」是基於父元素而不是視口定位我的一個元素。我非常想知道1）爲什麼會發生這種情況，2）我該如何讓它停止。 – BlairHippo

FWIW了同樣的看法，當我跑成這樣，問題轉向在其CSS中成爲父母div與-webkit-transform: translate3d(0, 0, 0)。顯然，這是一個潛在的混亂兒童元素與position: fixed的已知來源。

爲了什麼，我試圖做的（打開和關閉fixed如堅持一個關鍵的導航元素添加到頁面的頂部，因爲它通過滾動的方式），該解決方案是其append頁面body元素時現在是時候把它固定在位，並將其粘回div。不知道這是否有助於OP，但如果你自己追逐這個bug，值得研究。

來源

2014-07-28 13:31:40 BlairHippo

這是一個證明這個問題的概念證明：http://codepen.io/markdebeer/pen/qrBDm – BlueCaret

這隻適用於Chrome瀏覽器，但不適用於IE11 – Adaptabi

OMG謝謝...這是駕駛我INSANE ....事實證明，我確實添加了一個變換...它不僅僅是3D，而且我使用的是翻譯Y ...刪除了它並修復了它應有的行爲。我想知道他們什麼時候能解決這個問題，因爲我覺得我之前已經看到過這個...它只是一個痛苦，因爲我使用top：50％和translateY（-50％）來垂直居中...... – carinlynchin

-1

假設這個問題是更多的解決方案的解釋，少....這裏是另一種觀點認爲：

說明第一

首先，your fiddle

你必須使用position: fixed;，引用行爲fixed和absolute的一般行爲除了絕對div沿着文檔滾動並且fixed沒有。

這兩個位置，都是相對於view-port而不是它們的設計佈局/ css ...即，簡單地說，它們是出於文檔的流向，因爲它們的參考點是瀏覽器的維度和不是容器！

NOW，來到了一個解決方案，你的問題

demo first

添加這個和你的代碼是好去！

.hubbub:hover h2 { 
     display:block; 
    }

記住你給width: 100%;和text-align: center;到h2.subtitled，所以viewport和container都將在這種情況下

來源

2014-01-13 13:46:54 NoobEditor

絕對相對於最近的具有相對或絕對定位的祖先，如果沒有，則爲文檔。固定總是相對於文檔。 – dewd

從固定元素的父級中刪除transform屬性。

由於某些原因，這會導致固定元素相對於父代而不是文檔。

Codepen example.

來源

2017-06-29 20:12:39 Alex

css「固定」子元素相對於父元素的位置不是視口，爲什麼？

回答

相關問題