CSS位置絕對 - 下一個定位元素是身體？

從msdn報價：CSS位置絕對 - 下一個定位元素是身體？

「如果它的父元素沒有被定位對象相對於父元素的位置 - 或體內放置的物體」

可以說，我設置一個div具有一定的維度至底部0;並留下：0;它不會位於身體的底部，而是位於viewport的左下角。此外，當給身體一個保證金 - div仍然在左下角viewport。

我知道如何使用這些屬性，但我在尋找推理。當沒有其他祖先被定位時，它不是絕對元素所定位的身體嗎？謝謝！

這裏是小提琴： http://jsfiddle.net/picbig/0p6rgv8f/

HTML：

<div id="large_box_greater_than_viewport"></div> <div id="absolute_cnt"></div>

CSS：

body{ margin-left: 200px; } #large_box_greater_than_viewport{ width: 900px; height: 10000px; background: red; } #absolute_cnt{ position: absolute; width: 65%; bottom: 0; left: 0; height: 80px; background: rgba(0,0,0,.7); }

來源

2015-09-18 Max Width

作爲rblarson寫道：當位置：相對於被設定它移動到主體的底部的主體元件上。但是，根據msdn的聲明（和許多其他來源聲明相同），該身體上的設置不應該是默認設置嗎？ –

絕對定位的元素相對於其包含的塊定位。

fixed定位的元素相對於initial containing block，其中的尺寸爲viewport。

含有初始塊

包含塊，其中根元素住是稱爲初始包含塊矩形。對於連續媒體，它具有視口的維度，並錨定在畫布原點;它是分頁媒體的頁面區域。

而且absolute定位元素尊重其由最近的祖先具有比static之外的其它position建立了包含塊。即fixed，absolute或relative。

的關鍵點是：

如果不存在這樣的祖先，包含塊是包含塊初始。

因此內部<body>該絕對定位的元素將不被放置到<body>本身的方面，但是對於含初始塊，即，視口。

http://www.w3.org/TR/CSS2/visudet.html#containing-block-details

來源

2015-09-18 12:57:14

所以它實際上是視口....感謝那 –

應該總是閱讀w3.org之前去mdn，msdn ...謝謝 –

你需要設置的身體位置：

body{ 
    margin-left: 200px; 
    position:relative; 
}

來源

2015-09-18 12:38:04 rblarsen

這就是對 - 一旦身體定位：相對;它移動到身體的底部，但不應該根據msdn的聲明（和許多其他來源聲明相同）的身體設置默認？ –

我相信所有元素的默認設置是'position：static;' – rblarsen

是的，除了我至少一直相信的身體 - 然後我的一個學生問我這個問題，我不能給他一個可以接受的答案。 –

-1

1）。是的，您可以將位置絕對標記爲標記，但您需要將該標記放置在與位置相關的另一個標記中。 2）。或者你可以在功能之前使用。

來源

2015-09-18 12:53:07

我在各種瀏覽器中嘗試了一些模式，你是對的！

該物體沒有相對於身體定位，除非身體被定位！

如果主體未定位，則該對象相對於視口進行定位。

來源

2015-09-18 12:54:05

CSS位置絕對 - 下一個定位元素是身體？

回答

相關問題