《HTML5权威指南》之创建布局

《HTML5权威指南》之创建布局

1.定位内容

控制内容可以通过定位实现，下面描述定位的相关属性：

属性          说明                      值
position    设置定位方法      
left        为定位元素设置偏移量      长度，百分数，auto
right
top
bottom
z-index     设置定位元素的层叠顺序     数字

1.1.设置定位类型

通过position属性可以设置元素的定位方法，这个属性的取值如下:

值               说明
static          元素为普通布局，默认值
relative        元素位置相对于普通位置定位
absolute        元素相对于position值不为static的第一位祖先元素来定位
fixed           元素相对于浏览器窗口来定位

这里说明一下，假设img元素的父元素是body元素，而且img元素的position属性设置为absolute，那么元素会随其他内容一起滚动，如果position设置fixed，那么img元素不会随内容一起滚动，相对浏览器位置固定的。

1.2.设置元素的层叠顺序

z-index属性指定元素显示的层叠顺序，下面总结这个属性：

属性              说明