爲什麼這個愚蠢的定位導致這個網站的變化？

如果你去這個網站：http://www.marketwatch.com/story/social-networking-for-social-smokers-2011-05-11並進入樣式並將<div id="blanket"></div>更改爲靜態位置，然後在其外部（或身體上）添加包裝position:relative，頁面會發生急劇變化（標題基本上重疊的內容區域在那一點爲什麼這個愚蠢的定位導致這個網站的變化？

我知道關於定位的一切告訴我這應該不會發生，但我不能完全弄清楚爲什麼我沒有找到任何東西在CSS中導致此行爲以及任何人有任何想法

編輯：？這不涉及到我的工作或什麼，但我的朋友把它帶到我的注意，我認爲這是一個大腦難事

。

我試着這樣做：

<body> 
    <div style="position: relative;"> 
    <div style="position: static;"> 
     <div id="blanket">...</div> 
    </div> 
    </div> 
</body>

而且這不會導致問題，所以顯然是頁面上的東西，但我無法弄清楚。它在chrome/FF/IE中執行此操作。

來源

2011-05-11 SventoryMang

它可能與212錯誤，175警告（s）w3c發現本頁面的標記錯誤。 – 2011-05-11 20:33:43

嘗試檢查標題中的元素。您將看到div#topchrome元以下樣式規則：

position: absolute; 
top: 0; 
width: 981px; 
z-index: 10000;

這個元素上的position（absolute，與top: 0）導致它推到頁面（默認情況下，未經修改的行爲）的最頂端。如果您將body更改爲position: relative;，則基本上已告知#topchrome是「絕對的，但相對於body」。所以現在，#topchrome實際上是身體的頂部，這是頁面的頂部。即便如此，這仍然不應該改變事情。真正的罪魁禍首是第三個演員，div#breakingnews，它有財產margin-top: 177px。在新流程中，我們有：

body { position: relative; } 
    div#breakingnews { margin-top: 177px; } 
    div#chrome 
      div#topchrome { position: absolute; top: 0; }

因此，div#breakingnews正在導致內容被推下。實際上，將div#blanket更改爲position: static與它無關，因爲它是static（默認值）。

來源

2011-05-11 20:42:54

我不知道這是否正確，因爲頂色會保持定位在破壞性新聞之下，如果身體沒有相對定位，它不會。我認爲問題在於，topchrome實際上並不正確地放在身體標籤的正下方，因爲您的狀態爲，但它在該邊緣之下變得不那麼容易，而且如果身體不是相對定位。 – SventoryMang 2011-05-11 20:55:12

也許我誤解了你的解釋，但是會不會有解決方案來防止這種情況發生，同時保持身體對親屬的地位？ – SventoryMang 2011-05-11 21:05:32

爲什麼這個愚蠢的定位導致這個網站的變化？

回答

相關問題