定位是CSS布局中非常重要的一环,利用定位,可以准确地定义元素框相对于其正常位置应该出现在哪里,或者相对于父元素或者相对于浏览器窗口本身
Position
值:static | relative | absolute | fixed | inherit
初始值:static
应用于:所有元素
继承性:无
计算值:根据指定确定
static:元素框正常生成,块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中
relative:元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留
absolute:元素框从文档流完全删除,并相对于其包含块定位。元素原先在正常文档流中所占的空间会关闭。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框
fixed:元素的表现类似于将position设置于absolute,不过其包含块是视窗本身
包含块
在定位中,包含块包括几种情况:
- 在HTML中,根元素就是html元素,在大多数浏览器中,初始包含块(根元素)是一个视窗大小的矩形
- 对于非根元素,则看其定位元素是relative或static,absolute
- relative或static:包含块是由最近的块级框、表单元格或行内块祖先框的内容边界构成
- absolute:包含块设置为最近的position值不是static的祖先元素
- 祖先是块级元素,包含块则设置为该元素的内边距边界
- 祖先是行内元素,包含块则设置为该祖先元素的内容边界
- 如果没有祖先,元素的包含块定义为初始包含块
- 元素可以定位到其包含块对的外面(使用负值)
偏移属性
三种定位机制(relative、absolute、fixed)需要依赖偏移属性(offset)来实现,这对于完成定位是非常重要的一环
top、right、bottom、left
值:<length> | <percentage> | auto | inherit
初始值:auto
应用于: 定位元素
继承性:无
百分数: 对于top和bottom,相对于包含块的高度;对于right和left,相对于包含块的宽度
计算值:对于相对定位元素,对于static元素为auto;对于长度值,是相应的绝对长度;对于百分数值,则为指定的值;否则则为auto
偏移属性定义了距离包含块相应边的偏移,而不是包含块左上角的偏移