【分享】说说标准——CSS核心可视化格式模型(visual formatting model)之十一:绝对定位

WebAdvocate 2010-08-26 04:53:55
在前面的帖子中,我们已经讲了可视化模型中布局的两大方面:1. 常规流 2. 浮动,布局3大部分只剩下了绝对定位。前面的帖子中也零星的提到过关于绝对定位的某些特性,但都不够细致系统。

绝对定位(Absolute positioning)

相对包含块偏移定位

在绝对定位模型中,一个框明确地基于它的包含块偏移。不是父元素,这点需注意。
要是人家问你,绝对定位相对于谁定位啊?你很快乐的说:它的父元素。那就显得矬了- -!
专业的说法,相对于包含快定位。所以,绝对定位元素的定位,关键是包含块,什么是包含块?见:【分享】说说标准——CSS核心可视化格式模型(visual formatting model)之一:包含块(containing block)

完全脱离常规流
它完全脱离了常规流(对后继的兄弟节点没有影响)。
这一点又与浮动元素不同,好歹浮动元素会对后继的行框产生影响,而且,后面声明的绝对定位元素也不会受前面定义的绝对元素的影响。
可以这么理解,常规流中的元素,都在同一个层上,浮动是处于常规流之上的一个特殊层,可能会对常规流中的元素有影响。但是绝对定位的元素不会,可以把每个绝对定位的框看做一个单独的图层,独来独往。所以,说它完全脱离了常规流也不无道理。
注意一点,绝对元素定位的 top 和 left 值跟绝对元素未脱离常规流之前在常规流中位置有关。

看这个例子:
<div style="position:absolute; width:100px; height:100px; background-color:red;">
absolute
</div>
<div style="height:50px; border:1px solid blue; width:200px;">DIV 中的普通文本元素</div>
<div style="position:absolute; left:60px; width:100px; height:100px; background-color:green;">
absolute
</div>
以上例子中,两个绝对定位元素都未声明其 top 特性,那么top就会取它在常规流中的位置(后面会讲到)。
中间的DIV在常规流中,影响了后面的绝对定位元素的位置,但是没有受到前面的绝对定位元素的影响。
实际截图:


绝对定位元素生成的包含块
一个绝对定位框会为它的常规流子元素和定位派生元素(不包含 fiexed 定位的元素)生成一个新的包含块。不过,绝对定位元素的内容不会在其它框的周围排列。
至于,为何只为常规流中的子元素还有绝对定位元素生成包含块,就不大了解了……有知道的么?分享一下……
注意,绝对定位框还会创建 block formatting contexts。在IE中则会触发 hasLayout 。

堆叠层次
它们可能会掩盖另一个框的内容,或者被另外一个框掩盖,这取决于互相重合的框的堆叠层次。 也就是我们前面说的三维的可视化模型,除了X轴,Y轴,还有Z轴。


固定定位(Fixed positioning)

固定定位是绝对定位的一个子类。唯一的区别是,对于固定定位框,它的包含块由可是窗口(viewport)创建。对于连续媒介,固定定位框并不随着文档的滚动而移动。从这个意义上说,它们类似于固定的背景图形。对于页面媒介,固定定位框在每页里重复。对于需要在每一页底部放置一个签名时,这个方法非常有用。

注意,在IE6里不支持 Fixed 定位,通常的做法是使用绝对定位,然后用JS控制绝对定位框的位置,来代替固定定位。

W3C官方给出一个使用固定定位布局的例子,为了看起来明显,我给所有的div加了个红色的边框,各位可以自行测试:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>A frame document with CSS2</TITLE>
<STYLE type="text/css">
BODY {
height: 8.5in
}
div {
border: 1px solid red;
}
/* Required for percentage heights below */
#header {
position: fixed;
width: 100%;
height: 15%;
top: 0;
right: 0;
bottom: auto;
left: 0;
}

#sidebar {
position: fixed;
width: 10em;
height: auto;
top: 15%;
right: auto;
bottom: 100px;
left: 0;
}

#main {
position: fixed;
width: auto;
height: auto;
top: 15%;
right: 0;
bottom: 100px;
left: 10em;
}

#footer {
position: fixed;
width: 100%;
height: 100px;
top: auto;
right: 0;
bottom: 0;
left: 0;
}
</STYLE>
</HEAD>
<BODY>
<DIV id="header"> ...</DIV>
<DIV id="sidebar"> ...</DIV>
<DIV id="main"> ...</DIV>
<DIV id="footer"> ...</DIV>
</BODY>
</HTML>

效果应该是(来自W3C):



可视化格式模型概述:
http://topic.csdn.net/u/20100719/17/ff203b89-135e-46cf-8fce-705f16e37beb.html?006156676166584196

更多说说标准系列:
【分享】说说标准系列目录
...全文
324 6 打赏 收藏 举报
写回复
6 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
arhang 2010-12-06
谢谢分享。。。
  • 打赏
  • 举报
回复
orme 2010-09-17
来学习一下!嘿嘿~
  • 打赏
  • 举报
回复
zlshum 2010-09-04
lz文章确实不错,顶一个先。
关于normal flow对绝对定位元素的位置影响,确实值得探讨.
  • 打赏
  • 举报
回复
cupoy1983 2010-08-31
楼主真棒~
  • 打赏
  • 举报
回复
yanbinquan 2010-08-27
好贴!!mark!!!
  • 打赏
  • 举报
回复
WebAdvocate 2010-08-27
CSDN的SQL语句出什么问题了……………………
唉……
同情中……
  • 打赏
  • 举报
回复
相关推荐
发帖
跨浏览器开发

5005

社区成员

解读Web 标准、分析和讨论实际问题、推动网络标准化发展和跨浏览器开发进程,解决各种兼容性问题。
社区管理员
  • 跨浏览器开发社区
加入社区
帖子事件
创建了帖子
2010-08-26 04:53
社区公告
暂无公告