css布局模型

  1. 流动模型（Flow）
  2. 浮动模型 (Float)
  3. 层模型（Layer）：定位

定位属性

  1. position: static; 默认值。

无定位，在HTML文档流中默认的位置.

  1. position: absolute;(表示绝对定位)

这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的祖先元素进行绝对定位。如果不存在这样的元素，则相对于body元素。

  1. position: relative;（表示相对定位）

相对于它在正常文档流的位置进行定位,它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置.

  1. position: fixed; （表示固定定位）

相对于浏览器窗口进行定位,元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

  1. 绝对定位的元素完全脱离标准流（在文档流中不占位置）。 它完全漂浮在标准流的上方。
  2. 相对定位在文档流中是占有位置的。 不管怎么移动，原来的位置保留。
  3. 根据这个特点，我们一般这样使用：
  4. 子元素绝对定位，父元素相对定位。

定位的特性

  1. 行内元素添加了绝对定位可以直接给高和宽不用转换。
  2. 块元素添加了绝对定位，如果没有指定宽度，会自动收缩到内容的宽度。
  3. 绝对定位的盒子不受父盒子padding的影响。
  4. 父元素有绝对定位，可以不需要清除浮动。

堆叠特性

z-index:规定元素的堆叠顺序

  • 拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
  • 元素可拥有负的 z-index 属性值
  • z-index的默认属性值是0
  • 仅能在定位元素上奏效（relative,fixed,absolute)
  • 该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。
  1. 层布局模型（定位）就像是图像软件PhotoShop中非常流行的图层编辑功能一样，每个图层能够精确定位操作，但在网页设计领域，由于网页大小的活动性，层布局没能受到热捧。但是在网页上局部使用层布局还是有其方便之处的。
  2. 页面布局的时候，我们用浮动。局部定位的时候用定位。
  3. 不要滥用定位！