网站建设中元素绝对定位时，会从文档流中完全删除。然后相对于其包含块定位，其边界根据偏移属性（top、left等）放置，定位元素不会流入其他元素的内容，反之亦然。这说明，绝对定位元素可能覆盖其他元素，或者被其他元素覆盖（本章后面会看到，你可以影响这种覆盖顺序）。
绝对定位元素的包含块是最近的position值不为static的祖先元素。网页设计人员通常会选择一个元素作为绝对定位元素的包含块，将其position指定为relative而且没有偏移：
p.contain {position; relative;}
考虑图10-38中的例子，这是由以下样式得到的结果：
p {margin: 2em;}
p.contain {position: relative;}/* establish a containing block*/ b {position: absolute; top: auto; right: 0; bottom: 0; left: auto; width: 8em; height: 5em; border: 1px solid gray;}
<body>
<p>
This paragraph does <era>not</em> establish a containing block for any of its
descendant elements that are absolutely positioned. Therefore, the absolutely
positioned <b>boldface </b> element it contains will be positioned with respect to the initial containing block. .
<p Class="contain">
Thanks to 'position; relative', this paragraph establishes a containing block for any of its descendant elements that are absolutely positioned. Since there is such an element——<em>that is to say,<b>a boldfaced element
that is absolutely positioned,</b> placed with respect to its containing block (the paragraph)</em>, it will appear within the element box generated by the paragraph.
</p>
</body>
两个段落中的b元素都是绝对定位。其区别在于各元素所用的包含块。第一段中的b元素相对于初始包含块定位，因为它的所有祖先元素的position都是static。不过，第二个段落设置为position: relative，所以它为其后代元素建立了一个包含块。
网页设计人员可能已经注意到，在第二段中，定位元素覆盖了段落中的部分文本内容。这是没有办法避免的，因为无法将b元素定位到段落之外（比如right或其他某个偏移属性使用负值），也无法为段落指定一个足够宽的内边距来容纳定位元素。另外，由于b元素有一个透明背景，所以会透过这个定位元素看到段落的文本。要避免这种情况，唯一的办法就是为定位元素设置一个背景，或者将其从段落中完全去除。
有时，网页设计人员可能想确保body元素为其所有后代建立一个包含块，而不是让用户代理选择初始包含块。这很简单，只需如下声明：
body {position: relative,}
在这样一个文档中，可以随便放置绝对定位段落（如下），这会得到如图10-39所示的结果：
<P style="position: absolute; top: 0; rights 25%; left: 25%; bottom: auto; width: 50%; height: auco; background: silver;">...</p>
现在段落定位在文档的最前面，其宽度是文档宽度的一半，并会覆盖前面的几个元素。
要强调重要的一点：元素绝对定位时，还会为其后代元素建立一个包含块。例如，可以将一个元素绝对定位，然后将它的一个子元素绝对定位，如图10-40所示，这是使用以下样式和基本标记生成的：
div {position: relative; width: 100%; height: l0em;
border: 1px solid; background:#EEE;}
div.a {position: absolute; top: 0; right: 0; width: 15em; height: 100%; margin-left: auto; background:#CCC;}
div.b {position: absolute; bottom: 0; left: 0; width: l0em; height: 50%; margin-top: auto; background:#AAA;}
<div>
<div class="a">absolutely positioned element A
<div cl-ass="b'>abso:Lutely positioned element B</div>
</div>
containing block
网页设计要记住，如果文档可滚动，定位元素会随着它滚动。只要绝对定位元素不是固定定位元素的后代，情况都是如此。其原因是元素最终会相对于正常流的某一部分定位。例如，如果将一个表绝对定位，其包含块是初始包含块，那么这个表就会随文档滚动，因为初始包含块是正常流的一部分。类似地，即使建立一个嵌套4层的绝对定位元素，“最外层”元素总是会相对于初始包含块定位„因此，它会随着初始包含块滚动，而其所有后代元素也会随之滚动。
注意：如果网页设计人员想将元素定位为相对于视窗放置，而不随文档的其余部分滚动，那么请继续看下去。后面关于固定定位的一节将告诉你怎么做。
当前文章标题：网页设计中的包含块和绝对定位元素
当前URL：http://www.lyjtt.cn/news/wzzz/absolute-elements.html
上一篇：网页设计中的绝对定位
