css定位

position:absoluteposition: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

你可能感兴趣的:(css)