CSS布局定位
position:
属性:
absolute:将对象从文档流中拖出,可以使用top,bottom等属性进行绝对的定位
relative:不会将对象从文档流中托出去,也可以使用top,bottom属性进行定位。
position属性设置为absolute:
<!doctype html>
<html>
<head>
<title>Document</title>
<style type = "text/css">
div
{
width:200px;
height:100px;
border:2px solid blue;
}
#div51
{
background-color:red;
position:absolute;
top:50px;
left:80px;
}
#div52
{
background-color:green;
width:300px;
height:100px;
}
#div53
{
background-color:orange;
}
</style>
</head>
<body>
<div id = "div51">AAAAAAAAAAAA</div>
<div id = "div52">BBBBBBBBBBBB</div>
<div id = "div53">CCCCCCCCCCCC</div>
</body>
</html>
position属性设置为relative:
<!doctype html>
<html>
<head>
<title>Document</title>
<style type = "text/css">
div
{
width:200px;
height:100px;
border:2px solid blue;
}
#div51
{
background-color:red;
position:relative;
top:80px;
left:80px;
}
#div52
{
background-color:green;
}
#div53
{
background-color:orange;
}
</style>
</head>
<body>
<div id = "div51">AAAAAAAAAAAA</div>
<div id = "div52">BBBBBBBBBBBB</div>
<div id = "div53">CCCCCCCCCCCC</div>
</body>
</html>
扫描二维码关注公众号,回复:
1857719 查看本文章