CSS 绝对定位与相对定位 总结一下CSS绝对和相对定位,有错误的请指教! 相对定位:是指元素在相对于文档布局的原始位置上进行偏移; 绝对定位:是指元素在原始的页面分离任意的定位. CSS提供的定位属性有9个: position(位置属性) left(横坐标属性) top(纵坐标属性) width(宽度属性) height(高度属性) clip(剪切属性) overflow(越界属性) z-index(Z轴位置属性) visibility(可见属性) ■位置属性position: 取值: absolute | relative | static 默认值: static 应用范围: 所有元素用于指定对象元素的定位方式,ABSOLUTE为绝对定位方式,RELATIVE为相对定位方式,STATIC为静态方式,需要定位时必须选择前两种, ■横坐标属性:LEFT 取值: 数值 | 百分比 | AUTO 默认值:AUTO 应用范围:需要进行定位的元素(位置属性取值为ABSOLUTE或RELATIVE的元素) 百分比:相对于上级元素的宽度,如上级元素的宽度为AUTO,则百分比定位没有意义用于指定对象元素的位置,是横坐标值 ■纵坐标属性: TOP 取值和LEFT相同,只不过是其纵坐标的值 ■宽度属性:WIDTH 取值和LEFT相同,指定对象元素所占的宽度 ■高度属性: HEIGHT 不用说了 ■越界属性:OVERFLOW 取值: visible | hidden | scroll auto 默认auto 应用范围:需要进行绝对定位的元素(只取值为ABSOLUTE) 用于指定对象元素中的内容超出容器范围的处理方式, VISIBLE:表示容器范围随内容扩大,通常优先扩大容器的高度; HIDDEN:容器范围不变,超出部分不可见 SCROLL:容器范围不变,但提供两个滚动条 AUTO:容器范围不变,只提供横向的滚动条 ■Z轴位置属性:Z-INDEX 取值: 整数 |AUTO 默认auto 应用范围:需要进行定位的元素(位置属性取值为ABSOLUTE或RELATIVE的元素) 用于指定对象元素的叠放的次序,如两个定位后的元素有重叠部分,按次值决定叠放次序,值大的放在上面,AUTO取值为 0,若都设AUTO则按定义的顺序从下向上叠放 ■可见属性:visibility 取值:visible | inherit | hidden 默认inherit 应用范围: 所有元素用于指定对象元素是否显示.VISIBLE为显示 , HIDDEN为不显示 , INHERIT为继承上级元素的可见属性 ■剪切属性:clip 晕,不明白,,请指教

举个例子: STYLE type=text/css> .css{position:absolute; width:200pt; height:200pt; top:10pt; left:10pt; overflow:hidden; z-index:3; visibility:visible; border:1px solid red }

绝对定位的坐标原点为上级元素的原点.与上级元素有关 相对定位的坐标原点为本身偏移前位置的原点,与上级元素无关.

绝对定位方法：
<STYLE type=text/css>
#abslayer{position:absolute;top:25pc;left:50px;width:200px;color:red;
font-weight:bold;}
</STYLE>
定位时直接引用： <SPAN id=abslayer>文本区域 </SPAN>

绝对定位方法： STYLE type=text/css> #abslayer{position:absolute;top:25pc;left:50px;width:200px;color:red; font-weight:bold;} 文本区域 </SPAN