CSS布局模型

一．常见的三种布局模型

1. 流动模型（flow）：元素没有转换类型，没有设置float的默认显示状态

2. 浮动模型（float）：通过给元素设置float进行页面布局

3. 层模型：语法：position:static|
   absolute | relative |fixed

二．定位

1绝对定位：position:absolute;

     参照物：必须满足以下2个条件：

a.    参照物和绝对定位元素必须是包含与被包含关系

b.    参照物必须具有定位属性；

如果找不到满足以上条件的参照物，那么相对于浏览器窗口进行定位

注：定位的位置是由left,right,top,bottom四个属性值决定

2.相对定位

语法：position:relative

参照物：元素偏移前的位置

相对定位和绝对定位的区别：、

1.    参照物不同
相对定位参照的是元素偏移前的位置，绝对定位参照离他最近且具有定位属性的父包含块

2.    是否会脱离文档流
相对定位不会脱离文档流，绝对定位会脱离文档流，原来的位置被其它元素占据。

3.固定定位

语法：position:fixed;

参照物：浏览器窗口或屏幕窗口

注：当绝对定位和固定定位的参照物都为浏览器窗口时，固定定位的元素不会跟随滚动条滚动，固定在一个位置上

注：设置了固定定位会脱离文档流，元素原来的位置被其他元素占据

三、透明度的设置

语法：opacity:数值; (取值范围0-1,0为完全透明，1为完全不透明)

注：IE8及以下浏览器不支持opacity属性，兼容写法如下：

            filter:alpha(opacity=数值);  （取值范围0-100）

四．图层

语法：z-index: auto |整数值

注： 允许设置负值

     只有具有定位属性的元素设置z-index才能有效

     没有设置z-index时，最后写的对象优先显示在上层，设置后，数值越大，层越靠上