绝对定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>position绝对定位</title>
<style type="text/css">
#box01{
width: 100px;height: 100px;
background: burlywood;position: absolute;
left: 100px;top: 50px;z-index: 99;/*把它改到面上来z-index数值越大越在面上*/}
#box02{width: 100px;height: 100px; background: aquamarine; position: absolute;left: 120px; top: 60px;}
#box03{width: 100px;height: 100px; background:darksalmon; position: absolute;left: 140px; top: 70px;}
#box{background: burlywood;}
</style>
</head>
<body>
<div id="box">
<div id="box01">box01</div>
<div id="box02">box02</div>
<div id="box03">box03</div>
<div class="clear"></div>
</div>
</body>
</html>
相对代码 和 相对与绝对相结合代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>relitive相对定位</title>
<style type="text/css">
/*相对定位*/
#box01{
width: 100px;height: 100px;
background: burlywood;position:relative;
left: 30px;top: 20px;}
#box02{width: 100px;height: 100px; background: aquamarine; position: relative;left: 60px; top: 30px;}
#box03{width: 100px;height: 100px; background:darksalmon; position:relative;left: 140px; top: 70px;}
#box{background: red; width: 300px; height: 300px; margin: 50px 100px;}
/*相对与绝对相结合*/
.box{background: red; width: 300px; height: 300px; margin: 50px 100px; position:relative;}
.box01{
width: 100px;height: 100px;
background: burlywood;position:absolute;
left: 50px;top: 20px;}
.box02{width: 100px;height: 100px; background: aquamarine; position:absolute ;left: 60px; top: 40px;}
.box03{width: 100px;height: 100px; background:darksalmon; position:absolute;left: 140px; top: 70px;}
</style>
</head>
<body>
<!--相对代码-->
<div id="box">
<div id="box01">box01</div>
<div id="box02">box02</div>
<div id="box03">box03</div>
<div id="clear"></div>
</div>
<br />
<!--相对与绝对代码-->
<div class="box">
<div class="box01">box01</div>
<div class="box02">box02</div>
<div class="box03">box03</div>
<div class="clear"></div>
</div>
</body>
</html>
3628
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
