网页设计定位.ppt

定位
CSS的定位模型
影响定位的因素
在代码中的位置
定位方式,即position属性的值
Z方向的位置,即z-index属性的值
四种定位模型(position属性的四个值)
静态定位static、相对定位relative、绝对定位absoulte
固定定位fixed (only firefox )
静态定位:static
默认的定位方式
按照代码顺序(或字符流)的顺序进行从上到下的定位
相对定位:relative
相对于原静态定位位置进行偏移
#box {
position:relative ;
left:40px
top:20px
}
相对定位(图)
绝对定位:absolute
摆脱在代码中的顺序,相对于最近的已相对定位的祖先元素进行偏移(一般即body元素)
#box {
position:abolute ;
left:20px ;
top:20px ;
}
可任意移动,并产生重叠效果
绝对定位(图)
固定定位
相对屏幕可见区进行定位
#box {
position:fixed ;
left:40px ;
top:20px ;
}
可实现固定浮动窗口的效果
仅firefox可用
Z-index
当采用特殊定位方式产生多个元素重叠显示时,决定元素在Z方向的顺序
当被定位元素的值
为负值时在下方,为正值时在上方
值小的在下方,值大的在上方
注意,对被静态定位的元素设置无效,其值一律默认为0
特殊的定位:浮动
float属性
left、right
具有相对定位的相对偏移的特点,但参照的对象是兄弟元素,故不能产生重叠的效果
具有绝对定位的不占据父元素空间的特点
可采用clear属性加以弥补