絕對位置在所有方向上都有0偏移量

我剛開始學習html和css，我一直在尋找各種網站來練習。絕對位置在所有方向上都有0偏移量

這個特殊的網站（http://jsfiddle.net/Hexapod/CWB39/260/show/）引起了我的注意，但我無法弄清楚這裏的元素是如何工作的。

如果你去的網站，有「事實框」，使用div元素。但是，這些div元素由另一個div元素組合在一起。這個div元素在所有方向上都有絕對位置和0px的偏移量。任何人都可以向我解釋這是什麼目的？

這裏是什麼樣子：

<div id="container"> 
    <div id="factbox1" class="info"> 
     <!-- some code --> 
    </div> 
    <div id="factbox2" class="info"> 
     <!-- some code --> 
    </div> 
</div> 

#container { 
    position: absolute; 
    top: 0px; 
    bottom: 0px; 
    left: 0px; 
    right: 0px;}

提前感謝！

PS。如果我在格式化或其他方面有問題，請告訴我！這是我第一次在這裏發佈。

來源

2014-03-31 Shwunky

這是爲了將元素拉伸到與最接近的父親的完全極值而設置的position。在這種情況下，要擴展瀏覽器視口的全部高度和寬度。

它基本上告訴元素，它的頂部應該符合其父項的頂端，它的底部應伸展到其父項的底部，左側和右側的底部應該是相同的。

另一種方法是使用以下的CSS：

html, body, #container{ 
height:100%: 
width:100%; 
}

的不同之處在於通過使用position:absolute提供了一種用於分層內容的選項。

來源

2014-03-31 11:54:49 SW4

讓我們來看看我是否明白這一點。通過執行上面的CSS，（div id =「container」）的當前尺寸實際上是當前瀏覽器視口的尺寸。這是正確的嗎？ – Shwunky

是......或者設置了「位置」的最近父母的尺寸。 – SW4

非常感謝！我昨天晚上一直在想這件事，現在你已經清楚地回答了我的問題。獎勵！ – Shwunky

絕對位置在所有方向上都有0偏移量

回答

相關問題