定位（position）的簡介
- 定位是一種更加高級的布局手段
- 通過定位可以將元素?cái)[放到頁面的任意位置
- 使用position屬性來設(shè)置定位
- 可選值：
- static 默認(rèn)值撤嫩，元素是靜止的沒有開啟定位
- relative 開啟元素的相對定位
- absolute 開啟元素的絕對定位
- fixed 開啟元素的固定定位
- sticky 開啟元素的粘滯定位
- 可選值：
相對定位
相對定位的設(shè)置
當(dāng)元素的position屬性值設(shè)置為relative時(shí)則開啟了元素的相對定位
相對定位的特點(diǎn)
- 元素開啟相對定位以后置森，如果不設(shè)置偏移量元素不會(huì)發(fā)生任何的變化
- 相對定位是參照于元素在文檔流中的位置進(jìn)行定位的
- 相對定位會(huì)提升元素的層級
- 相對定位不會(huì)使元素脫離文檔流
- 相對定位不會(huì)改變元素的性質(zhì)塊還是塊，行內(nèi)還是行內(nèi)
偏移量（offset）
當(dāng)元素開啟了定位以后弯菊，可以通過偏移量來設(shè)置元素的位置
-
top
- 定位元素和定位位置上邊的距離
-
bottom
- 定位元素和定位位置
-
定位元素垂直方向的位置由top和bottom兩個(gè)屬性來控制，通常情況下我們只會(huì)使用其中一
- top值越大，定位元素越向下移動(dòng)
- bottom值越大母剥，定位元素越向上移動(dòng)
-
left
- 定位元素和定位位置的左側(cè)距離
-
right
- 定位元素和定位位置的右側(cè)距離
-
定位元素水平方向的位置由left和right兩個(gè)屬性控制，通常情況下只會(huì)使用一個(gè)
- left越大元素越靠右
- right越大元素越靠左
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
body {
font-size: 60px;
}
.box1 {
width: 200px;
height: 200px;
background-color: #bfa;
}
.box2 {
width: 200px;
height: 200px;
background-color: orange;
position: relative;
left: 100px;
top: -200px;
}
.box3 {
width: 200px;
height: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</body>
</html>
絕對定位
絕對定位的設(shè)置
當(dāng)元素的position屬性值設(shè)置為absolute時(shí)，則開啟了元素的絕對定位
絕對定位的特點(diǎn)
- 開啟絕對定位后环疼，如果不設(shè)置偏移量元素的位置不會(huì)發(fā)生變化
- 開啟絕對定位后习霹，元素會(huì)從文檔流中脫離
- 絕對定位會(huì)改變元素的性質(zhì)，行內(nèi)變成塊炫隶，塊的寬高被內(nèi)容撐開
- 絕對定位會(huì)使元素提升一個(gè)層級
- 絕對定位元素是相對于其包含塊進(jìn)行定位的
包含塊( containing block )
正常情況下：
包含塊就是離當(dāng)前元素最近的祖先塊元素絕對定位的包含塊:
包含塊就是離它最近的開啟了定位的祖先元素淋叶，如果所有的祖先元素都沒有,開啟定位則根元素就是它的包含塊html（根元素、初始包含塊）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
body {
font-size: 60px;
}
.box1 {
width: 200px;
height: 200px;
background-color: #bfa;
}
.box2 {
width: 200px;
height: 200px;
background-color: orange;
position: absolute;
bottom: 0;
right: 0;
}
.box3 {
width: 200px;
height: 200px;
background-color: yellow;
}
.box4 {
width: 400px;
height: 400px;
background-color: tomato;
position: relative;
}
.box5 {
width: 300px;
height: 300px;
background-color: aliceblue;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box4">
4
<div class="box5">
5
<div class="box2">2</div>
</div>
</div>
<div class="box3">3</div>
</body>
</html>
絕對定位元素的布局
- 水平布局
left + margin-left + border-left + padding-left + width + padding-right + border-right + margin-right + right = 包含塊的內(nèi)容區(qū)的寬度 - 當(dāng)我們開啟了絕對定位后:
水平方向的布局等式就需要添加left 和 right 兩個(gè)值伪阶，
此時(shí)規(guī)則和之前一樣只是多添加了兩個(gè)值：
當(dāng)發(fā)生過度約束：
如果9個(gè)值中沒有 auto 則自動(dòng)調(diào)整right值以使等式滿足煞檩，
如果有auto，則自動(dòng)調(diào)整auto的值以使等式滿足 - 可設(shè)置auto的值：
margin width left right
因?yàn)閘eft 和 right的值默認(rèn)是auto栅贴，所以如果不指定left和right斟湃，則等式不滿足時(shí)，會(huì)自動(dòng)調(diào)整這兩個(gè)值 - 垂直方向布局的等式的也必須要滿足
top + margin-top/bottom + padding-top/bottom + border-top/bottom + height = 包含塊的高度
固定定位
固定定位的設(shè)置
將元素的position屬性設(shè)置為fixed則開啟了元素的固定定位
固定定位特點(diǎn)
固定定位也是一種絕對定位檐薯，所以固定定位的大部分特點(diǎn)都和絕對定位一樣凝赛，唯一不同的是固定定位永遠(yuǎn)參照于瀏覽器的視口進(jìn)行定位，固定定位的元素不會(huì)隨網(wǎng)頁的滾動(dòng)條滾動(dòng)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
body {
font-size: 60px;
height: 2000px;
}
.box1 {
width: 200px;
height: 200px;
background-color: #bfa;
}
.box2 {
width: 200px;
height: 200px;
background-color: orange;
position: fixed;
left: 0;
top: 0;
}
.box3 {
width: 200px;
height: 200px;
background-color: yellow;
}
.box4 {
width: 400px;
height: 400px;
background-color: tomato;
}
.box5 {
width: 300px;
height: 300px;
background-color: aliceblue;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box4">
4
<div class="box5">
5
<div class="box2">2</div>
</div>
</div>
<div class="box3">3</div>
</body>
</html>
粘滯定位
粘滯定位的設(shè)置
當(dāng)元素的position屬性設(shè)置為sticky時(shí)則開啟了元素的粘滯定位
粘滯定位的特點(diǎn)
粘滯定位和相對定位的特點(diǎn)基本一致坛缕，
不同的是粘滯定位可以在元素到達(dá)某個(gè)位置時(shí)將其固定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>導(dǎo)航條</title>
<link rel="stylesheet" href="./css/reset.css">
<style>
body{
height: 3000px;
}
/* 設(shè)置nav的大小 */
.nav{
/* 設(shè)置寬度和高度 */
width: 1210px;
height: 48px;
/* 設(shè)置背景顏色 */
background-color: #E8E7E3;
margin:100px auto;
position: sticky;
top: 10px;
}
/* 設(shè)置nav中l(wèi)i */
.nav li{
/* 設(shè)置li向左浮動(dòng)墓猎，已使菜單橫向排列 */
float: left;
/* 設(shè)置li的高度 */
/* height: 48px; */
/* 將文字在父元素中垂直居中 */
line-height: 48px;
}
/* 設(shè)置a的樣式 */
.nav a{
/* 將a轉(zhuǎn)換為塊元素 */
display: block;
/* 去除下劃線 */
text-decoration: none;
/* 設(shè)置字體顏色 */
color: #777777;
/* 修改字體大小 */
font-size: 18px;
padding: 0 39px;
}
.nav li:last-child a{
padding: 0 42px 0 41px;
}
/* 設(shè)置鼠標(biāo)移入的效果 */
.nav a:hover{
background-color: #3F3F3F;
color: #E8E7E3;
}
</style>
</head>
<body>
<!-- 創(chuàng)建導(dǎo)航條的結(jié)構(gòu) -->
<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 href="#">Reference</a>
</li>
</ul>
</body>
</html>
元素的層級
元素的層級的設(shè)置
對于開啟了定位元素，可以通過z-index屬性來指定元素的層級
z-index
z-index需要一個(gè)整數(shù)作為參數(shù)赚楚，值越大元素的層級越高毙沾，元素的層級越高越優(yōu)先顯示
元素的顯示與層級
- 如果元素的層級一樣，則優(yōu)先顯示靠下的元素
- 祖先的元素的層級再高也不會(huì)蓋住后代元素
