进一步的进行方便的使用,我们可以对不同的盒子进行定位
instance:
<html>
<head>
<title>css定位</title>
<meta charset="UTF-8"/>
<style type="text/css">
img{
}
#div1{
/*border: solid 3px red;
width: 600px;
height: 300px;
margin-left: 100px;
margin-top: 50px;*/
background-image: url(../img/0.jpg);
/*background-size: cover; */
}
#div2{
/*border: solid 3px aqua;
width: 600px;
height: 300px;
margin-left: 100px;
margin-top: 50px;*/
position: relative;
left: 100px;
top: 100px;
background-color: brown;
z-index: 1;
background-image: url(../img/3.jpg);
/*abackground-size: cover;*/
}
#div3{
/*border: solid 3px ;
width: 600px;
height: 300px;
margin-left: 100px;
margin-top: 50px;*/
position: relative;
background-color: blanchedalmond;
z-index: 2;
background-image: url(../img/5.jpg);
/*background-size: cover;*/
}
#div4{
/*border: solid 3px yellow;
width: 600px;
height: 300px;
margin-left: 100px;
margin-top: 50px;*/
background-image: url(../img/9.jpg);
/*background-size: cover;*/
}
#divshow{
width: 100px;
height: 100px;
/*position: fixed;*/
position: absolute;
/* border: solid 3px pink;*/
left: 100px;
top: 100px;
background-image: url(../img/7.jpg);
/*background-size: cover;*/
}
#divfix{
border: solid 3px pink;
width: 100px;
height: 100px;
position: fixed;
right: 1px;
top: 200px;
background-image: url(../img/dangao.jpg);
/*background-size: cover;*/
}
div{
background-size: cover;
border: solid 3px ;
}
#div1,#div2,#div3,#div4{
width: 600px;
height: 300px;
margin-left: 100px;
margin-top: 50px;
}
</style>
</head>
<body>
<div id="div1">
</div>
<!--<img src="../img/0.jpgmg" alt="" />-->
</div>
<div id="div2">
<div id="divshow">
</div>
<!--<img src="../img/1.jpg" alt="" />-->
</div>
<div id="div3">
<!--<img src="../img/8.jpg" alt="" />-->
</div>
<div id="div4">
<!--<img src="../img/9.jpg" alt="" />-->
</div>
<div id="divfix">
</div>
</body>
</html>
定位:
position:
相对定位:relative;相对元素移动指定的位置(相对于自己原有的位置)可以使用left,top,right,bottom进行调整。
注意:其他元素的位置是不会改变的。
绝对位置:absolute:位置是绝对的,但是可以加入到一个div中,其是参考父类的div位置的相对位置。如果没有设置父类div,其默认为相对于界面。
固定位置:fixed:将元素固定在某个位置,不随着界面的滑动而改变。同样可以使用left,top,right,bottom进行调整。