第一阶段 XHTML.定位样式2

一定位布局(Position)
1.格式
position:static默认值|
fixed固定|
absolute绝对|
relative相对
2.static默认值：默认文档流(占位)
3.fixed固定
说明:
（1）脱离文档流不占位
(2)默认坐标浏览器左上角，通过 top,
left,right,bottom属性来移动
元素位置
(3)有滚动条时，元素位置被固定
4.absolute绝对定位
说明:
（1）脱离文档流不占位
(2)默认坐标浏览器左上角，通过 top,
left,right,bottom属性来移动
元素位置

5.relative相对定位
(1)默认坐标自身文档的左上角，通过 top,
left,right,bottom属性来移动
(2)自身文档占位
说明:
工作中：相对定位和绝对定位结合实现
原理给父元素或祖先元素一个相对定位，将坐标点
定在父元素或祖先元素左上角，然后对子元素绝对定位
对子元素通过 top,left,right,bottom属性来移动
元素
6.z-index 实现层排序
说明:
（1）只能用在有fixed，absolute,relative
属性中
(2)可以有 正值，负值 默认值0
(3) 没单位，值越大元素在上面

7透明(Opacity)
（1）opacity:0~1;
说明: w3c标准的浏览器 IE7.0以上等
(2）filter:alpha(opacity=1~100);
说明: IE浏览器支持

8.hack技术(调各个浏览器的兼容)

(1)条件注释法（只针对IE）
<!--[IF IE]> IE浏览器代码<![ENDIF]-->
<!--[IF IE 6]> IE6.0浏览器代码<![ENDIF]-->
(2)属性前缀法
_属性 : 只有IE6.0支持
*属性 : IE6.0，IE7.0支持
(3)选择器前缀法
*html 选择器{...} IE6.0支持
*+html 选择器{...} IE7.0支持

9.overflow 溢出

overflow：visible默认值
hidden|
auto|
scroll

hidden 溢出隐藏： 不显示超出对象尺寸的内容
auto :必须时对对象实现裁剪或显示滚动条
scroll：总显示滚动条