logo标签列表

CSS定位absolute - 下一个定位元素是body吗？

csspositionabsolute
5

引用自msdn:

"对象相对于父元素的位置定位 - 如果其父元素未定位，则相对于body对象"

假设我为特定尺寸的div设置bottom 0；和left: 0;，它将不会定位在body底部，而是在viewport左下方。此外，在为body设置margin时，该div仍将位于viewport左下角。

我知道如何使用这些属性，但我正在寻找理由。当没有其他祖先被定位时，绝对元素难道不是针对body进行定位吗？谢谢！

这是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);
}
正如rblarson所写：当在body元素上设置position: relative时，它会移动到body的底部。但根据msdn的声明（以及许多其他陈述相同的来源），该设置不应该是默认的吗？ - Max Width
4个回答
7
绝对定位元素相对于其包含块进行定位。
固定定位元素相对于初始包含块进行定位，该包含块的尺寸为视口的尺寸。
引用： 初始包含块是根元素所在的包含块，是一个矩形。对于连续媒体，它具有视口的尺寸，并以画布原点为锚定点；对于分页媒体，它是页面区域。
而absolute定位元素相对于最近带有position属性（除了static）的祖先进行定位，即fixed、absolute或relative。
关键点是： 如果没有这样的祖先，则包含块是初始包含块。
因此，位于<body>内部的绝对定位元素不会相对于<body>本身放置，而是相对于初始包含块即视口放置。

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

1
在查看 MDN、MSDN 等网站之前，应始终先阅读 w3.org。谢谢！ - Max Width
3
你需要设置body元素的位置：
body{
    margin-left: 200px;
    position:relative;
}
没错 - 一旦将body设置为position:relative;，它就会移到页面底部。但是根据MSDN（和许多其他相同的来源）的声明，body的默认设置不应该是这样吗？ - Max Width
我相信所有元素的默认设置是 position:static;。 - razemauze
是的，除了主体以外，我一直认为至少应该这样 - 然后我的一个学生问了我那个问题，我无法给他一个可接受的答案。 - Max Width
0

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

除非也定位了body，否则该对象不会相对于body定位！

如果没有定位body，则该对象相对于视口定位。

-1

1). 是的，您可以将 position 属性设置为绝对定位，但需要将该标签放置在具有相对定位的另一个标签内。

2). 或者您可以使用 after before 功能来实现此操作。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接