定位：
- 定位是一種更加高級的佈局手段。
- 通過定位可以將元素放到頁面的任意位置。
- 使用position屬性來設置定位
可選值：
static 默認值，元素是靜止的沒有開啓定位。
relation 開啓元素的相對定位。
absolute 開啓元素的絕對定位。
fixed 開啓元素的固定定位。
sticky 開啓元素的粘滯定位。
相對定位：
當元素的position屬性設置爲relative時則開啓了元素的相對定位。
- 相對定位的特點：
1.元素開啓相對定位以後，如果不設置偏移量元素不會發生任何變化。
2.相對定位是參照元素在文檔流中的位置進行定位的。（也就是原位置）
3.相對定位會提高元素的層級。
4.相對定位不會使元素脫離文檔流。
5.相對定位不會改變元素的性質，塊還是塊，行內還是行內。 - 偏移量(offset)：
當元素開啓定位以後，可以通過偏移量來設置元素的位置。
1.top
- 定位元素和定位位置上邊的距離。
- top值越大，元素越往下。
2.bottom
- 定位元素和定位位置下邊的距離。
- bottom值越大，元素往上走。
定位元素垂直方向的位置由top和bottom兩個屬性來控制，使用其一即可。
3.left:
- 定位元素和定位位置的左側距離。
- left值越大，越靠右。
4.right:
- 定位元素和定位位置的右側距離。
- right值越大，越靠左。
定位元素水平方向的位置由left和right兩個屬性控制。通常情況下只會使用一個。
其和外邊距的區別在於，margin可能會導致其他元素位置的變動，而該定位不會。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div{
font-size: 30px;
}
.box1{
width: 100px;
height: 100px;
background-color: pink;
}
.box2{
width: 100px;
height: 100px;
background-color: #bfa;
position: relative;/*只有在開啓定位(即非static的情況下)的情況下，才能設置top等這些參數，否則沒用。*/
top: -100px;
left: 100px;
/*margin-top: -100px;
margin-left: 100px;*/
}
.box3{
width: 100px;
height: 100px;
background-color: orange;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</body>
</html>
上圖box2的移動，沒有影響box3。如果box2通過外邊距margin來移動的，box3的位置也會受到如下圖的影響：
絕對定位：
- 當元素的position屬性設置爲absolute時，則開啓了絕對定位。
- 絕對定位的特點:
- 開啓絕對定位後，如果不設置偏移量元素的位置不會發生變化。
- 開啓絕對定位後，元素會從文檔流中脫離。
<!DOCTYPE html> <html> <head> <title></title> <style> div{ font-size: 30px; } .box1{ width: 100px; height: 100px; background-color: pink; } .box2{ width: 100px; height: 100px; background-color:yellowgreen; position: absolute; top: 0px; left: 0px; } .box3{ width:100px; height: 100px; background-color: purple; } </style> </head> <body> <div class="box1">1</div> <div class="box2">2</div> <div class="box3">3</div> </body> </html>![]()
- 絕對定位會改變元素的性質，行內變成塊，塊的寬高被內容撐開。
<!DOCTYPE html> <html> <head> <title></title> <style> div{ font-size: 30px; } .box1{ width: 100px; height: 100px; background-color: pink; } .box2{ background-color:yellowgreen; position: absolute; top: 0px; left: 0px; } .box3{ width:100px; height: 100px; background-color: purple; } </style> </head> <body> <div class="box1">1</div> <div class="box2">2</div> <div class="box3">3</div> </body> </html>![]()
- 絕對定位會使元素提示一個層級(其可以蓋住其他的元素)。
- 絕對定位元素是相對其包含塊進行定位的。
包含塊(containing block):
- 正常情況下：
包含塊就是離當前元素最近的祖先塊元素。
例如： <div><div></div></div>:外面的div是裏面div的包含塊;
<div><span><em>hello</em></span></div>:em的包含塊元素是div，因爲span是行內元素。
- 絕對定位的包含塊：
包含塊就是離它最近的開啓了定位的祖先元素。 如果所有的祖先元素都沒有開啓定位，則根元素就是它的包含塊。
（html:又稱根元素、初始包含塊。）
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
div{
font-size: 30px;
}
.box1{
width: 100px;
height: 100px;
background-color: pink;
}
.box2{
width: 300px;
height: 300px;
background-color:yellowgreen;
position: absolute;
}
.box3{
width:200px;
height: 200px;
background-color: purple;
}
.box4{
width:100px;
height: 100px;
background-color:#bfa;
position: absolute;
bottom :0px;
right: 0px;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2
<div class="box3">3
<div class="box4">4</div>
</div>
</div>
</body>
</html>
box2是box4的包含塊。
絕對定位元素的位置：
- 水平佈局：
left+margin-left+border-left+padding-left+width+padding-right+border-right+margin-right+right=包含塊的內容區的寬度
當我們開啓了絕對定位後，水平方向的佈局等式就需要添加left和right兩個值。此時規則和之前一樣只是添加了兩個值：當發生過渡約束：
- 如果9個值沒有auto則自動調整right值以使等式滿足。
- 如果有auto，則自動調整auto的值以使等式滿足。
-可設置auto的值：margin width left right
-因爲left和right的值默認是auto，所以如果不知道left和right，則等式不滿足時，會自動調整這兩個值。
- 垂直方向佈局的等式的也必須要滿足：
top+margin-top/bottom+padding-top/bottom+border-top/bottom+height+bottom=包含塊的高度
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.box1{
width: 300px;
height: 300px;
background-color: pink;
position: absolute;
}
.box2{
width: 100px;
height: 100px;
background-color: greenyellow;
position: absolute;
margin-top: auto;
margin-bottom:auto;
margin-left:auto;
margin-right:auto;
top:0px;
bottom: 0px;
left: 0px;
right: 0px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
固定定位：
- 將元素的position屬性設置爲fixed則開啓了元素的固定定位。
- 固定定位也是一種絕對定位，所以固定定位的大部分特點都和絕對定位一樣，唯一不同的是固定定位永遠參照於瀏覽器的視口進行定位。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
body{
height: 2000px;
}
div{
font-size: 30px;
}
.box1{
width: 100px;
height: 100px;
background-color: pink;
}
.box2{
width: 200px;
height: 200px;
background-color: greenyellow;
}
.box3{
width: 100px;
height: 100px;
background-color: #bfa;
position: fixed;
top:0px;
left: 0px;
}
.box4{
width: 100px;
height: 100px;
background-color: purple;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2
<div class="box3">3</div>
</div>
<div class="box4"></div>
</body>
</html>
上面的動圖可以看出，隨着鼠標的移動頁面的其他元素也在移動，只有設置了固定定位的box3沒有。
粘滯定位：
- 當元素的position屬性設置爲sticky時則開啓了元素的粘滯定位。
- 粘滯定位和相對定位的特點基本一致，不同的是粘滯定位可以在元素達到某個位置時將其固定。
- 不推薦使用，因爲一些瀏覽器不適用。
以w3school的導航條爲例：
<!DOCTYPE html>
<html>
<head>
<title>W3school導航條練習</title>
<link rel="stylesheet" href="../reset.css">
<style>
body{
margin:0px;
padding: 0px;
background-color: #fff;
border:0px;
/*添加滾動條*/
height: 2000px;
}
.nav{
width:1210px;
height :48px;
background-color: #E8E7E3;
margin: 50px auto;
/*將導航條設置爲粘滯定位*/
position:sticky;
top:20px;
}
.nav li{
float: left;
/*padding-left:20px; */
height: 48px;
line-height: 48px;/*將元素垂直居中*/
}
.nav a{
/*將a轉換成塊元素，就可以設置寬高了*/
display: block;
text-decoration:none;
color: #777;
/*修改字體大小*/
font-size: 18px;
padding:0 39px;
}
.nav li .r1{
/*這裏如果只寫.r1的話，.r1的權重<.nav a的權重，所以選擇的時候寫得越具體越好。*/
padding:0px 42px 0px 41px;
}
.nav a:hover{
background-color: #3f3f3f;
color: #E8E7E3;
}
</style>
</head>
<body>
<ul class="nav">
<li>
<a href="#">HTML/CSS</a>
</li>
<li>
<a href="#">Browser Side</a>
</li>
<li>
<a href="#">Server Side</a>
</li>
<li>
<a href="#">Programming</a>
</li>
<li>
<a href="#">XML</a>
</li>
<li>
<a href="#">Web Building</a>
</li>
<li>
<a class="r1" id="r2" href="#">Reference</a>
</li>
</ul>
</body>
</html>
元素的層級：
- 對於開啓了定位元素，可以通過z-index屬性來指定元素的層級。
- z-index需要一個整數作爲參數，值越大元素的層級越高，元素的層級越高越優先顯示。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div{
font-size: 30px;
}
.box1{
width: 200px;
height: 200px;
background-color: greenyellow;
position: absolute;
z-index: 3;
}
.box2{
width: 200px;
height: 200px;
/*background-color:rgba(255,0,0,.3);*/
background-color: pink;
position: absolute;
top:50px;
left: 50px;
z-index: 2;
}
.box3{
width: 200px;
height: 200px;
background-color: yellow;
position: absolute;
top: 100px;
left: 100px;
z-index: 1;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</body>
</html>
- 如果元素的層級一樣，則優先顯示靠下的元素。
- 祖先的元素的層級再高也不會蓋住後代元素。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div{
font-size: 30px;
}
.box3{
width: 200px;
height: 200px;
background-color: yellow;
position: absolute;
z-index: 3;
}
.box4{
width: 100px;
height: 100px;
background-color: purple;
position: absolute;
z-index: 1;
}
</style>
</head>
<body>
<div class="box3">3
<div class="box4">4</div>
</div>
</body>
</html>
