CSS定位详解-优快云博客

本文详细介绍了CSS中的四种定位方式：相对定位、绝对定位、fixed定位及其使用方法，并通过实例展示了如何运用这些定位方式来精确控制页面元素的位置。

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>