定位（position）簡介：
定位是一種更加進階的布局手段，通過定位可以将元素擺到頁面的任何位置
使用position屬性來設定定位
- 可選項：
static 預設值， 元素是精緻的，沒有開啟定位（隻要不是static都是開啟了）
relative 開啟元素的相對定位
absolute 開啟元素的絕對定位
fixed 開啟元素的固定定位
sticky 開啟元素的粘滞定位
- 相對定位：
- 當元素的position 屬性值設定為relative時則開啟了元素的相對定位
- 相對定位的特點：
1、元素開啟相對定位以後，如果不設定偏移量元素就不會發生任何的變化
2、相對定位是參照于元素在文檔流中的位置進行定位的
3、相對定位會提升元素的層級
4、相對定位不會使得元素脫離文檔流
5、相對定位不會改變元素的性質，塊還是塊，行内還是行内
- 偏移量（offset）
-當元素開啟了定位以後，可以通過設定偏移量元素來設定元素的位置
top : 定位元素和定位位置上邊的距離
bottom： 定位元素和定位位置下邊的距離，
1）定位元素垂直方向通常由top和bottom兩個屬性來控制，通常情況下我們隻會使用其一
2）top 值越大，定位元素越往下移動
3）bottom值越大，定位元素越往上移動
4） left: 定位元素和定位位置的左側距離
5）right: 定位元素和定位位置的右側距離
定位元素水準方向的位置由left和right兩個屬性控制，通常情況下隻會使用一個
left越大，元素越靠右
right越大，值越靠左
定位和margin最大的差別：margin會影響到其他元素布局，會把其他元素一起往下擠，偏移量不會，隻會改變開啟定位的元素的位置
注意： 偏移量隻适用于定位元素，開啟定位才可以設定偏移量
<!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box1{ width: 100px; height: 100px; background-color: yellowgreen; position: relative; left: 100px; top: 100px; } </style> </head> <body> <div class="box1"></div> </body> </html>
box1向右移動100px,向下移動100px
- 絕對定位：
當元素position屬性值設定為 absolute時，則開啟了元素的絕對定位
絕對定位的特點：
1、開啟絕對定位後，如果不設定偏移量元素的位置不會發生變化（說明元素的其他性質可能會變）
2、開啟絕對定位後，元素會從文檔流中脫離
3、絕對定位會改變元素的性質，行内變成塊，塊的寬度會被内容撐開
4、絕對定位會使元素提升一個層級
5、絕對定位是相對于其包含塊進行定位的
包含塊（containing block）：
1）正常情況下：
包含塊就是離目前元素最近的祖先塊元素（包括父元素）
2）絕對定位的包含塊
包含塊就是離它最近的開啟了定位的祖先元素，如果所有的祖先元素都沒有開啟定位則根元素就是它的包含塊
html（根元素，初始包含塊）
下面代碼，這時，box3以根元素為包含塊，原始坐标為螢幕原點，向下移動20px
<style>
.box1{
width: 150px;
height: 150px;
background-color: yellowgreen;
}
.box2{
width: 200px;
height: 200px;
background-color: yellow;
}
.box3{
width: 70px;
height: 70px;
background-color: violet;
position:absolute;
top: 20px;
left: 100px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box3"></div>
</div>
<div class="box2"></div>
<div class="box4"></div>
以父元素box1為包含塊，box1向下移動300px,box2也跟随向下移動，top設定為0
<style>
.box1{
/* 給box1開啟定位，于是box3以box1的原點為起始原點 */
position: relative;
top: 300px;
width: 150px;
height: 150px;
background-color: yellowgreen;
}
.box2{
width: 200px;
height: 200px;
background-color: yellow;
}
.box3{
width: 70px;
height: 70px;
background-color: violet;
position:absolute;
/* 設定top為0px, 貼緊頂部 */
top:0px;
left: 100px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box3"></div>
</div>
<div class="box2"></div>
<div class="box4"></div>
效果如下：
-固定定位
将元素的position屬性設定為fixed
固定定位也是一種絕對定位，是以固定定位的大部分特點都和絕對定位一樣
唯一不同的是：固定定位永遠參照浏覽器的視口進行定位
固定定位不會随着網頁的滾動條滾動，是固定在視窗的某個位置上
注意： 相容性不好ie6不相容
-粘滞定位
當元素position屬性設定為sticky時則開啟了元素的粘滞定位
粘滞定位和相對定位的特點基本一緻，不同的是：
粘滞定位可以在元素達到某個位置時将其固定。
float和position: absolute的差別：
position: absolute會導緻元素脫離文檔流，被定位的元素等于在文檔中不占據任何位置，在另一個層呈現，可以設定z-index。PS的圖層效果就是position: absolute。
float也會導緻元素脫離文檔流，但還在文檔或容器中占據位置，把文檔流和其它float元素向左或向右擠，并可能導緻換行。圖檔的文字環繞布局效果就是float。