第3:绝对定位(absolute)
当元素设置绝对定位后.则会从正常的文档流中脱离.其后面的元素会完全忽视这个绝对定位的元素.就好像正常文档流中不存在这个元素一样.然后根据离其最近的一个具有position属性的父对象的边缘为定位基点(如果没有没有这样一个父对象 那么默认依据窗口元素定位),根据设置定位属性的4个方向的值来实现绝对的定位布局.
例子:
运行代码框
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
我们可以看到.当色块2设置绝对定位之后.后面的第3色块忽视其存在,自动填补到正常的文档流中(这个是根据窗口元素定位)
我们再来看一下IE中依据窗口元素定位的一个特殊情况 例子:
运行代码框
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
此DEMO与position:absolute的定位工作方式无关~只是作为IE中特殊的情况列出来
除了上面的基本的position:absolute特点,其还有下面几点;
1.如果我们只设置了position:absolute而没有设置定位属性的4个方向值的话.那么该绝对定位的元素依然遵循其在文档流中的正常位置,它仍然受前一元素的文档流位置影响,按照正常文档流进行布局。只不过现在是从正常的文档流中抽出.其后面的元素会忽视其存在.而自动补上去.因为绝对定位的元素是不占文档流的布局空间的。
例子:
运行代码框
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
例子中第2个红色的色块就是一个只具有position:absolute属性的元素,它仍然在正常的布局位置呈现,只不过后面的元素会忽视其存在
2.绝对定位会自动把一个元素转化为块元素
例子:
运行代码框
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
按照标准的渲染方式.行间元素设置的宽度和高度是被忽略的,但是当给元素绝对定位之后,该元素会具有块元素的特性,而可以设置宽度和高度(虽然绝对定位的元素不占布局空间)
出处:蓝色理想
责任编辑:bluehearts
上一页 position两三事 [1] 下一页 position两三事 [3]
◎进入论坛网页制作、WEB标准化版块参加讨论,我还想发表评论。
|