position屬性指定一個元素的定位方法的類型: static relative absouate fixed
static 定位
HTML 元素的默認值，即沒有定位，遵循正常的文檔流對象。
靜態定位的元素不會受到 top, bottom, left, right影響。
fixed 定位
元素的位置相對於瀏覽器窗口是固定位置，即使窗口是滾動的它也不會移動；
Fixed定位使元素的位置與文檔流無關，因此不占據空間；
Fixed定位的元素和其他元素重疊。
relative 定位
相對定位元素的定位是相對其正常位置；
移動相對定位元素，但它原本所占的空間不會改變；
相對定位元素經常被用來作為絕對定位元素的容器塊；
absolute 定位
絕對定位的元素的位置相對於最近的已定位父元素，如果元素沒有已定位的父元素，那么它的位置相對於<html>
absolute 定位使元素的位置與文檔流無關，因此不占據空間。
absolute 定位的元素和其他元素重疊。
如果父級沒有設定position屬性，那么當前的absolute則結合TRBL屬性以瀏覽器左上角為原始點進行定位。
如果父級設定position屬性，那么當前的absolute則結合TRBL屬性以父級（最近）的左上角為原始點進行定位。
如果不設定TRBL（top,right,bottom,left簡稱TRBL）屬性值，那么當前absolute就會以父級左上角為原始點定位
sticky 定位
sticky 英文字面意思是粘，粘貼，所以可以把它稱之為粘性定位。
position: sticky; 基於用戶的滾動位置來定位。
粘性定位的元素是依賴於用戶的滾動，在 position:relative 與 position:fixed 定位之間切換。
它的行為就像 position:relative; 而當頁面滾動超出目標區域時，它的表現就像 position:fixed;，它會固定在目標位置。
元素定位表現為在跨越特定閾值前為相對定位，之后為固定定位。
這個特定閾值指的是 top, right, bottom 或 left 之一，換言之，指定 top, right, bottom 或 left 四個閾值其中之一，才可使粘性定位生效。否則其行為與相對定位相同。
重疊的元素
元素的定位與文檔流無關，所以它們可以覆蓋頁面上的其它元素
z-index屬性指定了一個元素的堆疊順序（哪個元素應該放在前面，或后面）
absolute relative 例
<!DOCTYPE html> <html> <head> <style> .div1{ height:100px; background-color: green; } .div2{ height:100px; background-color: blueviolet; } .div3{ height:100px; background-color: #aaa; } .div4{ height:100px; background-color: #777; } </style> </head> <body> <div class="div1">第一個div</div> <div class="div2">第二個div</div> <div class="div3">第三個div</div> <div class="div4">第四個div</div> </body> </html>
將div2設置absolute
- div設置了absolute,則該div的寬度就由文本決定,或width設置；
- absolute脫離文檔流，下面的div會上移占據之前第二個div的位置；
- top和left是相對於離它最近且不是static定位的父元素來定位的，在此div2因為沒有父元素，所以div相對於根元素即html元素來定位。
.div2{
height:100px;
background-color: blueviolet;
position:absolute;
top:50px;
left:50px;
}
將div2設置relative
- 不脫離文檔流，div默認寬度；
- 不會影響其他div的位置，對象原來占有的位置保留,覆蓋其它對象；
- top和left是相對於它原本自身的位置來定位。
.div2{
height:100px;
background-color: blueviolet;
position:relative;
top:50px;
left:50px;
}
給div2添加一個父div ，父子元素都是absolute定位
<!DOCTYPE html> <html> <head> <style> .div1{ height:100px; background-color: green; text-align:center; } .div2{ height:100px; width:100px; background-color: blueviolet; position:absolute; top:50px; left:50px; } .div3{ height:100px; background-color: #aaa; text-align:center; } .div4{ height:100px; background-color: #777; text-align:center; } .container1{ position:absolute; height:200px; background-color: greenyellow; } </style> </head> <body> <div class="div1">第一個div</div> <div class="container1"> DIV容器 <div class="div2">第二個div</div> </div> <div class="div3">第三個div</div> <div class="div4">第四個div</div> </body> </html>
說明：
- container1沒有設置寬度，其寬度由文本“DIV容器"定，如果沒有“DIV容器"文字則container1容器不顯示，但是div2還是正常顯示在這個位置；
- div2設置了寬度 width:100px;
- div2和其父容器div都設置為absolute，下面的div3、div4會上移，div2會相對於父div來定位；
- 當Position屬性值為absolute時對象從文檔流中抽取出來，原占有的位置被后面的對象頂替上來，Top值表示對象上邊框與瀏覽器窗口頂部的距離，bottom值表示對象下邊框與瀏覽器窗口底部的距離，如果兩者同時存在，只有Top起作用；如果兩者都未指定，則其頂端將與原文檔流位置一致（上圖就是沒有指定）。即垂直保持位置不變。left的值表示對象左邊框與瀏覽器窗口左邊的距離right的值表示對象右邊框與瀏覽器窗口右邊的距離，兩者同時存在時，只有left起作用；如果兩者都未指定，則其左邊將與原文檔流位置一致，即水平保持位置不變。
- 在Position屬性值為absolute的同時，如果有一級父對象（無論是父對象還是祖父對象，或者再高的輩分，一樣）的Position屬性值為Relative時，則上述的相對瀏覽器窗口定位將會變成相對父對象定位，這對精確定位是很有幫助的。
父元素absolute定位（設置寬度），子元素relative定位（沒有設置寬度），效果如下：
1）子元素div2寬度 = 父元素容器div寬度 ；2）子元素根據top left 的值然后移動：
<!DOCTYPE html> <html> <head> <style> .div1{ height:100px; background-color: green; text-align:center; } .div2{ height:100px; background-color: blueviolet; position:relative; top:50px; left:50px; } .div3{ height:100px; background-color: #aaa; text-align:center; } .div4{ height:100px; background-color: #777; text-align:center; } .container1{ position:absolute; height:200px; width:300px; background-color: greenyellow; } </style> </head> <body> <div class="div1">第一個div</div> <div class="container1"> DIV容器 <div class="div2">第二個div</div> </div> <div class="div3">第三個div</div> <div class="div4">第四個div</div> </body> </html>
- 容器absolute定位，而且設置了width寬度 ；
- 子元素div2 relative定位，子元素div2的寬度等於容器的寬度，由於子元素有相對移到，所有移動到容器的外面。
父元素absolute定位（沒有設置寬度），子元素relative定位（設置寬度），效果如下：
1）子元素div2寬度撐大父元素（寬度一致）；2）子元素根據top left 的值然后移動： 和上例一樣，一個是跟隨大小，一個是撐大。
.container1沒有設置寬度，div2設置了寬度
<!DOCTYPE html> <html> <head> <style> .div1{ height:100px; background-color: green; text-align:center; } .div2{ height:100px; background-color: blueviolet; position:relative; width:300px; top:50px; left:50px; } .div3{ height:100px; background-color: #aaa; text-align:center; } .div4{ height:100px; background-color: #777; text-align:center; } .container1{ position:absolute; height:200px; background-color: greenyellow; } </style> </head> <body> <div class="div1">第一個div</div> <div class="container1"> DIV容器 <div class="div2">第二個div</div> </div> <div class="div3">第三個div</div> <div class="div4">第四個div</div> </body> </html>
效果：
子元素absolute定位，父元素absolute定位，子元素寬度不會影響父元素的寬
.div2{
height:100px;
background-color: blueviolet;
position:absolute;
width:300px;
top:50px;
left:50px;
}
其它不變，效果如下：
父元素relative 定位（沒有設置寬度），子元素absolute定位（設置寬度），效果如下：
1）父元素div2寬度占滿一行（沒有設置寬度）；
2）子元素寬度由內容寬度決定，或設置寬度；
3）子元素根據top left 的值然后移動
<!DOCTYPE html> <html> <head> <style> .div1{ height:100px; background-color: green; text-align:center; } .div2{ height:100px; background-color: blueviolet; position: absolute; top:50px; left:50px; } .div3{ height:100px; background-color: #aaa; text-align:center; } .div4{ height:100px; background-color: #777; text-align:center; } .container1{ position:relative ; height:100px; background-color: greenyellow; } </style> </head> <body> <div class="div1">第一個div</div> <div class="container1"> 容器 <div class="div2">第二個div</div> </div> <div class="div3">第三個div</div> <div class="div4">第四個div</div> </body> </html>
效果：
