定位
1.普通流定位
image
eg:
image.png
<style>
#a{background-color:yellow;padding:20px;width:300px; }
/*visibility: hidden;有地方看不見(jiàn)*/
/*display: none 消失*/
#a span{display:inline-block;font-size:3em;background-color:blue;width:100px ;height:120px}
#b{background-color:blue ;width:100px; }
</style>
<div id="a">
saj<span>asd</span><span>xxx</span>
</div>
<div id="b">
nadka
</div>
2.相對(duì)定位
image
image
div{
width:100px;
height:100px;
background-color:pink;
margin:2px;
}
#q{
top: -50px;
position:relative;
}
#p{
position:relative;
left:200px;
top:30px;
background-color:skyblue;
}
#e{
background-color:yellow;
position:relative;
right:100px;
}
</style>
aac
dndf
<div id="q">ccc</div>
3.絕對(duì)定位
image
image
<style>
#a{
position:relative;
width:300px;
height:300px;
background-color:blue;
left:50px;
top:50px;
}
#c{
/*調(diào)整層的高度*/
z-index:4;
position:absolute;
/*自動(dòng)判斷父容器等是否是相對(duì)定位，否自body為準(zhǔn)（自身有相對(duì)定位）*/
top:10px;
left:10px;
width:200px;
height:200px;
background-color:lawngreen;
}
#b{
z-index:3;
position:absolute;
top:3px;
width:50px;
height:50px;
background-color:red;
}
</style>
<div id="a">aaa
<div id="c">asc</div>
<div id="b">bbb</div>
</div>
3.固定定位
image
<style>
#a{
position:relative;
width:300px;
height:300px;
background-color:blue;
left:50px;
top:50px;
}
#b{
/*固定定位*/
/*position: fixed;*/
/*top: 100px;*/
/*right: 0px;*/
/*width: 100px;*/
/*height: 100px;*/
/*background-color: greenyellow;*/
position:fixed;
top:100px;
right:0px;
width:100%;
height:100px;
background-color:greenyellow;
}
</style>
<div id="a">aaa
<div id="b">asc</div>
</div>
##浮動(dòng)
浮動(dòng)流：
普通流認(rèn)為浮動(dòng)流不存在趟佃，所有浮動(dòng)都在一個(gè)圖層里
eg:
<style>
#container {
background-color:black;
width:500px;
}
#a{
float:left;
width:100px;
height:100px;
background-color:greenyellow;
margin:1px;
}
#a1{
float:right;
width:100px;
height:80px;
background-color:greenyellow;
margin:1px;
}
#b{
clear:both;
}
</style>
<div id="container">
<div id="a"></div>
<div id="a1"></div>
<div id="b"></div>
</div>
