CSS2.1规范笔记——9.6 绝对定位

发布时间 2023-07-22 19:52:51作者: hdxg

绝对定位

绝对定位模型中,盒相对其包含块偏移,它会从常规流中全部移除(不会影响后面的兄弟)。绝对定位的盒会为常规流中的子级和绝对(不包括fixed)定位的后代建立一个新的包含块。

然而绝对定位的内容不会沿着任何其他盒排列。它们可能会遮住其他盒的内容(或者被它们自身遮住),取决于重叠盒的堆叠层级(stack levels)。

注意,本规范中出现的绝对定位元素表示元素的position为absolute或fixed、

fixed定位

fiexed是绝对定位的子类。fixed定位的盒的唯一区别是,包含块由视口建立。对于连续媒体,当文档滚动时,fixed盒不会移动。在这一点上,它们和fixed背景图像类似。对于分页媒体,fixed定位的盒会在每一页上重复(出现)。编写者可以用fixed定位来创建帧式(frame-like展现):

实现该布局的css选择器属性取值如下:

css

position

width

height

top

right

bottom

left

#header

fixed

100%

15%

0

0

auto

left

#siderbar

fixed

10em

auto

15%

auto

100px

0

#main

fixed

auto

auto

15%

0

100px

10em

#footer

fixed

100%

100px

auto

0

0

0

 

html代码如下:

<DIV id="header"> ...  </DIV>
<DIV id="sidebar"> ...  </DIV>
<DIV id="main"> ...  </DIV>
<DIV id="footer"> ...  </DIV>