CSS的定位属性
什么叫定位?就是可以把div放到页面中的任何位置。前提是要计算好位置。
用到position属性,有两个属性值:
absolute:将对象从文档流中拖出,可以使用left、right、top、bottom属性对其进行绝对定位。
relative :对象不会从文档流中拖出来,可以使用left、right、top、bottom属性设置正常文档流中偏移位置。
一、position:absolute
例1:position:absolute的例子
//定位.html
<html>
<head>
<title>定位</title>
<style type="text/css">
div{
width: 200px;
height:100px;
border: 2px solid blue;
}
#div1{
background-color:red;
position:absolute;
}
#div2{
width:250px;
height:100px;
background-color:green;
}
#div3{
background-color:orange;
}
</style>
</head>
<body>
<div id="div1">AAAAAAAAAAAAA</div>
<div id="div2">BBBBBBBBBBBBBB</div>
<div id="div3">CCCCCCCCCCCCCC</div>
</body>
</html>
|
效果:div2跑到了 div1的后面。
解释:
div1,div2,div3本来是依次往下排列。将div1设置position:absolute后,就将div1拖出来了。
div1的位置空了,div2、div3就依次补齐。
div1在div2上面飘着。
例2:position:absolute的例子
//定位.html
<html>
<head>
<title>定位</title>
<style type="text/css">
div{
width: 200px;
height:100px;
border: 2px solid blue;
}
#div1{
background-color:red;
position:absolute;
top:50px;
left:80px;
}
#div2{
width:250px;
height:100px;
background-color:green;
}
#div3{
background-color:orange;
}
</style>
</head>
<body>
<div id="div1">AAAAAAAAAAAAA</div>
<div id="div2">BBBBBBBBBBBBBB</div>
<div id="div3">CCCCCCCCCCCCCC</div>
</body>
</html>
|
效果:
二、position:relative
例:position:relative
//定位.html
<html>
<head>
<title>定位</title>
<style type="text/css">
div{
width: 200px;
height:100px;
border: 2px solid blue;
}
#div1{
background-color:red;
}
#div2{
background-color:green;
position:relative;
top:80px;
left:120px;
}
#div3{
background-color:orange;
}
</style>
</head>
<body>
<div id="div1">AAAAAAAAAAAAA</div>
<div id="div2">BBBBBBBBBBBBBB</div>
<div id="div3">CCCCCCCCCCCCCC</div>
</body>
</html>
|
效果:
解释:
div2并不从文档中拖出来,所以div3不补齐。另外top,left是相对于原来的div2的位置的偏移。
|