html的四中定位的理解

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

原文地址:https://www.cnblogs.com/xplj2013/p/8177588.html