一.常见的三种布局模型
-
流动模型(flow):元素没有转换类型,没有设置float的默认显示状态
-
浮动模型(float):通过给元素设置float进行页面布局
-
层模型:语法: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时,最后写的对象优先显示在上层,设置后,数值越大,层越靠上