当前位置: 老葡京网站娱乐 > 网页设计 > Css教程 > 正文

CSS绝对定位的例子2

时间:2016-08-09 本站 乖兔快跑

老葡京网站娱乐 www.sdguanhua.com 绝对定位,是指对该元素最近的那个脱离了标准流的元素定位;如果没有父元素(或有父元素,但父元素没有脱离标准流),则相对body左上角定位。

html文件:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>CSS绝对定位的例子</title>
<link rel="stylesheet" style="text/css" href="test1.css" />
</head>
<body>
<div class="div1">
内容1
</div>
<div class="div1">
内容3
</div>
<div class="div1">
内容4
</div>
<div class="div2">
<div class="div1" id="special">
内容2
</div>
</div>
</body>
</html>

CSS文件:

.div1{
width:70px;
height:30px;
margin-left:5px;
background:silver;
float:left; /*左浮动*/
}
#special{
position:absolute;/*绝对定位*/
left:40px;
top:100px;
}
.div2{
position:relative;/*相对定位,脱离了标准流*/
left:100px;
top:100px;
width:200px;
height:150px;
background:pink;
float:left;
}

效果如下图:

本文地址:http://www.sdguanhua.com/web/Css/201608/50325.htm