标签:
position:absolute;position:relative绝对定位使用通常是 父级定义position:relative定位,子级定义position:absolute绝对定位属性,并且子级使用left或right和top或bottom进行绝对定位。
css代码:
1 <style> 2 .divcss5{ position:relative;width:400px;height:200px; 3 border:1px solid #000} 4 /* 定义父级position:relative 为就认为是绝对定位声明吧 */ 5 .divcss5-a{ position:absolute;width:100px;height:100px; 6 left:10px;top:10px;background:#000} 7 /* 使用绝对定位position:absolute样式 并且使用left top进行定位位置 */ 8 .divcss5-b{ position:absolute;width:50px;height:50px; 9 right:15px;bottom:13px;background:#00F} 10 /* 使用绝对定位position:absolute样式 并且使用right bottom进行定位位置 */ 11 </style>
html代码
1 <div class="divcss5"> 2 <div class="divcss5-a"></div> 3 <div class="divcss5-b"></div> 4 </div>
通常我们使用position:absolute;position:relative进行绝对定位布局,通过CSS进行定义定位,DIV布局HTML,注意什么地方使用position:relative,什么地方使用position:absolute进行定位,同时不要忘记使用left、right、top、bottom的配合定位具体位置。绝对定位如果父级不使用position:relative,而直接使用position:absolute绝对定位,这个时候将会以body标签为父级,使用position:absolute定义对象无论位于DIV多少层结构,都将会被拖出以<body>为父级(参考级)进行绝对定位。绝对定位非常好用,但切记不要滥用,什么地方都用,这样有时会懒得计算距离上、下、左、右间距,同时可能会造成CSS代码臃肿,更加经验适当使用,用于该使用地方。
在绝对定位时候我们可以使用css z-index定义css层重叠顺序。
同时left、right、bottom、top的数值,可以使用(Photoshop)PS切片工具获取准确的数值。
文章摘自:div+css
标签:
原文地址:http://www.cnblogs.com/xiaomifeng/p/4514823.html