Question

引自msdn：

＆＃34;对象相对于父元素的位置 - 或来定位身体对象如果其父元素未定位＆＃34;

假设我设置了一个具有一定维度的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);
}

Answer 1

绝对定位的元素相对于其包含块定位。

fixed定位元素与initial containing block相对应，它采用viewport的维度。

包含块的初始

根元素所在的包含块是一个矩形   称为初始包含块。对于连续媒体，它有   视口的尺寸，并锚定在画布原点;它是   分页媒体的页面区域。

absolute定位元素与其包含块有关，该块由最近的祖先建立，position除static以外的任何内容。即fixed，absolute或relative。

关键点是：

如果没有这样的祖先，则包含块是初始值包含块。

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

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

Answer 2

您需要设置正文的位置：

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

Answer 3

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

除非身体定位，否则物体不会相对于身体定位！

如果未定位主体，则对象相对于视口定位。

Answer 4

1）。是的，你可以给标签提供绝对位置，但你需要将该标签放在另一个位置相对的标签内。

2）。或者您可以在功能之前完成此操作。

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

4 个答案: