网络编程
位置:首页>> 网络编程>> 网页设计>> position两三事(2)

position两三事(2)

作者:aslen 来源:蓝色理想 发布时间:2009-02-16 15:23:00 

标签:position,浏览器,绝对定位,相对定位
 

第3:绝对定位(absolute)

当元素设置绝对定位后.则会从正常的文档流中脱离.其后面的元素会完全忽视这个绝对定位的元素.就好像正常文档流中不存在这个元素一样.然后根据离其最近的一个具有position属性的父对象的边缘为定位基点(如果没有没有这样一个父对象 那么默认依据窗口元素定位),根据设置定位属性的4个方向的值来实现绝对的定位布局.

例子:

运行代码框

我们可以看到.当色块2设置绝对定位之后.后面的第3色块忽视其存在,自动填补到正常的文档流中(这个是根据窗口元素定位)

我们再来看一下IE中依据窗口元素定位的一个特殊情况
例子:

运行代码框


此DEMO与position:absolute的定位工作方式无关~只是作为IE * 殊的情况列出来

除了上面的基本的position:absolute特点,其还有下面几点

1.如果我们只设置了position:absolute而没有设置定位属性的4个方向值的话.那么该绝对定位的元素依然遵循其在文档流中的正常位置,它仍然受前一元素的文档流位置影响,按照正常文档流进行布局。只不过现在是从正常的文档流中抽出.其后面的元素会忽视其存在.而自动补上去.因为绝对定位的元素是不占文档流的布局空间的。

例子:

运行代码框


例子中第2个红色的色块就是一个只具有position:absolute属性的元素,它仍然在正常的布局位置呈现,只不过后面的元素会忽视其存在

2.绝对定位会自动把一个元素转化为块元素

例子:

运行代码框



按照标准的渲染方式.行间元素设置的宽度和高度是被忽略的,但是当给元素绝对定位之后,该元素会具有块元素的特性,而可以设置宽度和高度(虽然绝对定位的元素不占布局空间)

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com