您的位置：首页 > Web前端 > CSS

第014讲 CSS 定位

2015-07-04 17:33 781 查看
1. CSS 定位





2. 相对定位



相对定位：相对原来的位置。虽然脱离的标准流，但是它的空间不能被占用。



.div1{
width:70px;
height:30px;
background:silver;
float:left;
margin-left:5px;
}

#spe{
position:relative;
left:40px;
top:100px;
}


<html>
<head>
<link rel="stylesheet" type="text/css" href="aa.css">
</head>

<body>

<div class="div1">内容1</div>
<div id="spe" class="div1">内容2</div>
<div class="div1">内容3</div>
<div class="div1">内容4</div>

</body>
</html>


3.绝对定位



绝对定位是指：对该元素最近的那个脱离了标准流的元素的定位，如果没有父元素(或者父元素没有脱离标准流)，则相对body左上角定位。

#spe{
position:absolute;/*绝对定位*/
left:40px;
top:100px;
}


3.1 父元素没有脱离标准流



.div2{
width:200px;
height:150px;
background:pink;
float:left;
}


<div class="div2">
<div id="spe" class="div1">内容2</div>
</div>


3.2 父元素脱离标准流



.div2{
position:relative;
left:100px;
top:100px;
width:200px;
height:150px;
background:pink;
float:left;
}


4. fixed 定位

fixed 定位：指不管怎么样，总是以视窗的左上角定位。

left,top 对static定位没有效果。static定位，左右移动是用margin-left , margin-top 移动位置。

5. z-index



用于设置对象(div)显示的时候，层叠的属性，值越小，越在下面。

<style>
#idParentDiv{width:100%;height:120px;padding:6px;background-color:buttonshadow;position:relative;}
#idDiv1{width:160px;height:80px;background-color:#FFD700;padding:6px;position:absolute;z-index:3;left:9px;top:9px;z-index:6;}
#idDiv2{width:120px;height:80px;background-color:thistle;padding:6px;position:absolute;z-index:3;right:9px;bottom:9px;z-index:4;}
#idDiv3{width:140px;height:80px;background-color:lightskyblue;padding:6px;position:absolute;z-index:3;left:150px;top:25px;z-index:5;}
#idCodeDiv{width:100%;padding:4px;font-family:verdana,tahoma;margin:12px 0px 0px 0px;background-color:#EEEEEE;font-weight:bold;}
</style>

<div id=idParentDiv>
<div id=idDiv1><img src="images/rdl_body3.jpg" style="border:1px solid #FFFFFF;"><br>z-index : 6 ; </div>
<div id=idDiv2><img src="images/rdl_body1.jpg" style="border:1px solid #FFFFFF;"><br>z-index : 4 ; </div>
<div id=idDiv3><img src="images/rdl_body2.jpg" style="border:1px solid #FFFFFF;"><br>z-index : 5 ; </div>
</div>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航