默認是相對於文檔的絕對定位還是...？

據我所知，絕對定位是相對於一個包含塊，它提供了一個定位上下文，默認情況下它是文檔。因此，默認情況下，應該針對html文檔的邊緣而不是相對於視口邊緣（瀏覽器窗口）來指定絕對定位？

例如，假設html文件具有的2000像素寬度的元件E，那麼這個文檔的寬度大約是2000像素，因此以下代碼：

#abs 
{ 
    position: absolute; 
    top: 128px; 
    right: 0px; 
    width: 100px; 
}

應該放置的元件#abs在文檔的最右側（文檔的最右邊和最左邊之間的距離大約爲2000px）。相反，#abs放置在視口的右側。我錯過了什麼？

感謝名單

來源

2009-12-22 carewithl

我想你錯過的是，視算作最上方的元素。

<html> 
<head> 
    <style type="text/css"> 
     #abs{ 
      position: absolute; 
      top: 128px; 
      right: 0px; 
      width: 100px; 
      height: 100px; 
      background-color: #333; 
     } 
    </style> 
    <title>test</title> 
</head> 
<body> 
    <div id="abs"> 
     test 
    </div> 
</body> 
</html>

這模仿你說你看到的行爲。如果您更改視口大小，則#abs div會沿着右邊緣。添加一個2000像素寬的元素不會改變這一點。

<html> 
<head> 
    <style type="text/css"> 
     #wide{ 
      width: 2000px; 
      height: 1px; 
     } 
     #abs{ 
      position: absolute; 
      top: 128px; 
      right: 0px; 
      width: 100px; 
      height: 100px; 
      background-color: #333; 
     } 
    </style> 
    <title>test</title> 
</head> 
<body> 
    <div id="wide"> 
     wide 
    </div> 
    <div id="abs"> 
     test 
    </div> 
</body> 
</html>

所以我認爲你的主要問題是你的假設是錯的。絕對定位是相對於視口，當沒有其他的相對或絕對位置包含它時。

來源

2009-12-22 18:54:44 idrumgood

呃，這完全令人困惑 - 我認爲「視口是最上面的元素」，你的意思是說，視口包含頁面中的所有其他元素，包括元素#abs？但是，如果是這種情況，那麼視口也包含＃wide元素（寬度爲2000px）。如果視口也包含#wide元素，那麼視口的寬度至少爲2000px，因此視口的最右側應該是離視口最左側2000px ?! – carewithl 2009-12-22 19:35:47

另外，您暗示瀏覽窗口只是瀏覽器在水平欄滾動到文檔最左側時顯示的窗口，而據我所知，視口是當前由瀏覽器顯示的文檔的任何部分，即使是當水平滾動條滾動到該文檔的最右側時，瀏覽器顯示的文檔的一部分（假設文檔非常寬）？ – carewithl 2009-12-22 19:39:40

視口並不意味着你的想法。視口是瀏覽器的可見部分。如果拖動瀏覽器的寬度爲900px，則視口爲900px。視口不會根據內部內容進行更改。視窗不是頁面上的實際元素，不像。如果包含2000像素寬的元素，但不包含視口，則的確爲2000像素。視口與您製作瀏覽器窗口的大小完全相同。 – idrumgood 2009-12-23 16:27:11

position:absolute元素基於他們在position:relative最近的父母上的定位。元素的默認位置是static。（<body> - 是一個元素，但也可以是驗收規範這一static規則。）

從我在上面看到的，你要描述的是<body>含#abc，而不是視口（窗口等）。因此水平滾動。

http://www.w3.org/wiki/CSS_absolute_and_fixed_positioning

來源

2012-07-04 12:06:35 Dawson

默認情況下，絕對定位是相對於文檔的「初始包含塊」。從the CSS 2.1 spec：

用於定位的盒子的含塊由最近的定位的祖先建立（或者，如果不存在，則initial containing block，如在我們的例子）。

「初始包含塊」是一個與視口大小相同的矩形，始終停留在文檔的開始處（通常是左上角）。當您滾動時，它不會圍繞文檔移動，就像視口一樣。

This example說明了相對於初始包含塊的絕對定位。

來源

2013-08-16 22:11:09 jaredjacobs

默認是相對於文檔的絕對定位還是...？

回答

相關問題