绝对定位特点
建立了以包含块位基准的定位
完全脱离标准文档流
随即拥有偏移属性跟z-index属性
未设置偏移量时:
无论是否存在已经定位的祖先元素,都保持在元素初始位置 脱离标准文档流
设置偏移量时:
偏移参照的基准:
无已定位的祖先元素:以<html>为偏移参照基准
有已定位的祖先元素:以距其最近的已定位的祖先元素为偏移参照基准
注意:当一个元素设置了绝对定位,没有设置宽度时,元素的宽度根据内容进行调节。
建立了以包含块位基准的定位
完全脱离标准文档流
随即拥有偏移属性跟z-index属性
未设置偏移量时:
无论是否存在已经定位的祖先元素,都保持在元素初始位置 脱离标准文档流
设置偏移量时:
偏移参照的基准:
无已定位的祖先元素:以<html>为偏移参照基准
有已定位的祖先元素:以距其最近的已定位的祖先元素为偏移参照基准
注意:当一个元素设置了绝对定位,没有设置宽度时,元素的宽度根据内容进行调节。
绝对定位布局:通过设置position属性实现,css中规定的第三种定位机制,能够实现横向多列布局及较为复杂的定位(带有遮罩层效果的提示框、固定层效果、全屏广告等)
拥有三种定位形式:1.静态定位 2.相对定位 3.绝对定位
可设置4个属性值:static(静态定位)、relative(相对定位)、absolute(绝对定位)、fixed(固定定位)【绝对定位和固定定位都属于绝对定位】
拥有三种定位形式:1.静态定位 2.相对定位 3.绝对定位
可设置4个属性值:static(静态定位)、relative(相对定位)、absolute(绝对定位)、fixed(固定定位)【绝对定位和固定定位都属于绝对定位】
2015-09-16
#wrap{width:970px; margin:0 auto;}
#mainbody{position:relative;overflow:hidden; margin-top:15px;}
#left{float:left;width:110px; border:1px solid #999;}
#mid{margin-left:123px;width:650px;border:1px solid #999;}
#right{position:absolute;left:790px;top:0;border:1px solid #999;}
#mainbody{position:relative;overflow:hidden; margin-top:15px;}
#left{float:left;width:110px; border:1px solid #999;}
#mid{margin-left:123px;width:650px;border:1px solid #999;}
#right{position:absolute;left:790px;top:0;border:1px solid #999;}
2015-09-10
<style type="text/css">
*{margin:0; padding:0;}
#wrap{width:970px;margin:0 auto;}
#mainbody{position:relative; margin-top:15px;}
#left{float:left;width:110px; }
#mid{float:left;left:123px;width:650px;border:1px solid #999;}
#right{position:absolute;left:787px;border:1px solid #999;}
</style>
*{margin:0; padding:0;}
#wrap{width:970px;margin:0 auto;}
#mainbody{position:relative; margin-top:15px;}
#left{float:left;width:110px; }
#mid{float:left;left:123px;width:650px;border:1px solid #999;}
#right{position:absolute;left:787px;border:1px solid #999;}
</style>
2015-09-10