CSS 绝对位置 - 下一个定位元素是正文？

Question

引用自msdn：

"Object is positioned relative to parent element's position—or to the body object if its parent element is not positioned"

假设我将具有特定维度的 div 设置为底部 0；离开：0；它不会位于 body 的底部，而是 viewport 的左下角。此外，当给 body 一个边距时 - div 仍将位于 viewport.

的左下角

我知道如何使用这些属性，但我正在寻找推理。当没有其他祖先定位时，它不是绝对元素定位到的主体吗？谢谢！

这是 fiddle： 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);
}

Answer 1

您需要设置正文的位置：

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

Answer 2

1).是的，您可以为标签提供绝对位置，但您需要将该标签放在另一个具有相对位置的标签中。

2).或者您可以使用之前的功能来执行此操作。

Answer 3

我在各种浏览器中尝试了一些模式，你是对的！

object 不是相对于 body 定位的，除非 body 也被定位了！

如果 body 未定位，则 object 相对于视口定位。

Answer 4

绝对定位的元素是相对于它们的包含块定位的。

fixed 相对于 initial containing block which takes the dimensions of the viewport.

定位的元素

Initial containing block

The containing block in which the root element lives is a rectangle called the initial containing block. For continuous media, it has the dimensions of the viewport and is anchored at the canvas origin; it is the page area for paged media.

和 absolute 定位元素相对于它们的包含块，该块由最近的祖先建立，position 不是 static。即 fixed、absolute 或 relative.

重点是：

If there is no such ancestor, the containing block is the initial containing block.

因此 <body> 内的绝对定位元素不会相对于 <body> 本身放置，而是相对于初始包含块，即视口。

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

CSS 绝对位置 - 下一个定位元素是正文？

CSS position absolute - next positioned element is body?

css

position

absolute