html元素的定位用共有四种,static,relative,absolution,fixed
1.static--------该定位是元素的默认定位,不能使用z-index层级分级的设置
2.relative-------相对定位(不脱离文档流,在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其它框。)
相对它的父级元素定位,可以使用z-index进行层级分级的设置
3.absolition---------绝对定位(脱离文档流,不占用空间,并且如果该元素为内联元素则会变为块级元素)
以最近的已定位父级元素定位,该父级元素必须是relative定位或absolution定位,否则就就以body为参照定位
4.fixed:相对于浏览器的可视窗口固定,在调整窗口的大小时,位置变化只与窗口有关。
下面为表格说明:
父级标签无position限定 | 父级标签用static限定 | 父级标签用fixed限定 | 父级标签用absolute限定 | 父级标签用relative限定 | |
fixed | 相对可视窗口 | 相对可视窗口 | 相对可视窗口 | 相对可视窗口 | 相对可视窗口 |
absolute | 相对body | 相对body | 相对body | 相对父级 | 相对父级 |
relative | 相对文本流定位(与父级有间接关系) | ||||
static |
相对父级定位 top等限定无效 |
相对父级定位 top等限定有效 |
相对父级定位 top等限定有效 |
相对父级定位 top等限定有效 |
相对父级定位 top等限定有效 |
图来自:----http://www.cnblogs.com/huangbx/archive/2012/08/15/2640734.html