一、前言
1.HTML中的三種布局方式：
- 標准流（普通流）：網頁中默認的布局方式，即順序布局
- 浮動：float
- 定位：position
2.position屬性的作用方式：
- 給position屬性設置相應的值，可使元素脫離正常的標准流，並且可以使用top、right、left、bottom屬性對元素進行定位，還可以使用z-index屬性對元素的層疊順序進行更改
- position的五個屬性值：static、relative、absolute、fixed、inherit
為方便，top、right、left、bottom屬性簡寫為TRLB
二、介紹position的五個屬性值
1.static：默認值，無定位
- 元素顯示在正常的標准流中，並且忽略TRLB以及z-index屬性的設置
- 相當於沒有設置position屬性
2.absolute:生成絕對定位元素
- 可以使用TRLB對元素進行定位,也可使用z-index更改元素的層疊順序
- 相對於 static 定位以外的第一個父元素進行定位,脫離了正常的標准流,並且不占用標准流空間
舉個栗子:
將div標簽的position設置為absolute
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>absolute</title> <style type="text/css"> *{ margin: 0px; padding: 0px; } .absolute{ width: 100px; height: 100px; border: 1px solid red; position: absolute; top: 0px; left: 0px; } </style> </head> <body> <p>你好</p> <div class="absolute"></div> </body> </html>
瀏覽器顯示:
通過頁面顯示我們發現,設置為absolute的絕對定位元素div,不顧處於標准流中的p標簽的存在,仍然顯示在了top:0px; left:0px;位置,
從中我們也可以看出絕對定位元素脫離了正常的標准流
3.relative：生成相對定位元素
- 可以使用TRLB對元素進行定位,也可使用z-index更改元素的層疊順序
- 雖然該元素的位置發生了移動，但相對定位元素仍然處於正常的標准流中,所占據的空間是未生成定位元素之前它所占據的空間，而不是移動之后所占據的空間
- 使用TRLB對元素進行定位時,不能破壞也無法破壞正常的標准流
- 相對於原來正常時的位置進行定位
舉個栗子:
將div標簽的position設置為relative
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>relative</title> <style type="text/css"> *{ margin: 0px; padding: 0px; } .relative{ width: 100px; height: 100px; border: 1px solid red; position: relative; top: 0px; left: 0px; } </style> </head> <body> <p>你好</p> <div class="relative"></div> </body> </html>
瀏覽器顯示:
我們發現,設置為relative的相對定位元素div,受標准流中的p標簽的約束,顯示在了p標簽的下方,因為它是相對於在標准流中原來的位置進行定位的.
通過下面兩個栗子來對比相對定位和絕對定位
絕對定位absolute
<div style="width: 240px; height: auto; border: solid 1px black;"> <div style="width: 80px; height: 80px; background-color: red; position: absolute; margin: 0 auto;"></div> </div>
相對定位relative
<div style="width: 240px; height: auto; border: solid 1px black;"> <div style="width: 80px; height: 80px; background-color: red; position: relative; margin: 0 auto;"></div> </div>
我們發現：1. 相對定位元素可以為父元素撐起高度，而絕對定位元素卻會造成父元素塌陷，也說明了相對定位元素沒有脫離標准流，而絕對定位元素脫離了標准流。
2.未脫離標准流的元素可以通過設置margin-left和margin-right為auto，來使塊級元素水平居中。
4.fixed:也是生成絕對定位元素
- 可以使用TRLB對元素進行定位,也可使用z-index更改元素的層疊順序
- 相對於瀏覽器窗口進行定位,脫離了正常的標准流,並且不占用標准流空間
- 當頁面滾動時，元素固定不動
舉個栗子:
給position設置為relative的div標簽,加一個position設置為relative的父標簽,觀察fixed是否受具有position的父標簽影響,作為對比我們再加上一個屬性值為absolute的div標簽
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>fixed</title> <style type="text/css"> *{ margin: 0px; padding: 0px; } .fixed{ width: 100px; height: 100px; border: 1px solid red; position: fixed; top: 0px; left: 0px; } .absolute{ width: 100px; height: 100px; border: 1px solid blue; position: absolute; top: 0px; left: 0px; } .pre{ width: 200px; height: 200px; border: 1px solid black; position: relative; top: 100px; left: 100px; } </style> </head> <body> <div class="pre"> <div class="fixed"></div> <div class="absolute"></div> </div> </body> </html>
網頁顯示:
我們發現,屬性值為fixed的子標簽並不受具有position屬性的父標簽影響,脫離了來父標簽的約束,相對於瀏覽器窗口顯示在top:0px; left:0px;位置.
而屬性值為absolute的子標簽卻受着具有position屬性的父標簽約束,相對於position為relative的父元素顯示在了top:0; left:0;位置,這也是fixed與absolute的一個重要區別。
5.inherit:繼承
- 從父標簽繼承position屬性值
舉個栗子:
對於父div標簽我們設置position:fixed,對於子div標簽我們設置position:inherit,觀察子標簽是否會繼承父標簽的position屬性值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>inherit</title> <style type="text/css"> *{ margin: 0px; padding: 0px; } .pre{ width: 200px; height: 200px; border: 1px solid black; position: fixed; top: 100px; left: 100px; } .inherit{ width: 100px; height: 100px; border: 1px solid red; position: inherit; top: 0px; left: 0px; } </style> </head> <body> <div class="pre"> <div class="inherit"></div> </div> </body> </html>
瀏覽器顯示:
我們發現,子標簽具有和父標簽同樣的position屬性值---fixed,子標簽的fixed使它顯示在了相對於瀏覽器窗口進行定位的top:0px; left:0px;位置
三、總結與補充
1.關於relative的補充
- 通過上面介紹發現relative並未使元素脫離正常的標准流,因此元素仍受標准流的約束(包括其它元素以及自身的外邊距和內邊距)
- 而脫離了標准流(具有absolute,fixed屬性值)的元素,則不受標准流的約束,不受其它元素內外邊距的約束,但自身的內外邊距會對自身產生約束
- 無論相對定位元素定位在哪里，它都一直占有原來位置上的文檔流，而絕對定位元素真正的脫離了文檔流，不再占用原來的位置
關於前兩點舉個栗子
給body標簽設置內邊距和外邊距,觀察相對定位元素和絕對定位元素的顯示情況
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>inherit</title> <style type="text/css"> body{ margin: 10px; padding: 10px; } .relative{ width: 100px; height: 100px; border: 1px solid red; position: relative; top: 0px; left: 0px; } .absolute{ width: 100px; height: 100px; border: 1px solid black; position: absolute; top: 0px; left: 0px; } </style> </head> <body> <div class="relative"></div> <div class="absolute"></div> </body> </html>
網頁顯示:
我們發現元素:<div class="relative"></div>受body標簽內外邊距的影響,顯示在了元素:<div class="absolute"></div>的右下方
關於第三點再舉個栗子
我們將中間的div設置為relative
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>z-index</title> <style type="text/css"> *{ margin: 0px; padding: 0px; } .yellow{ width: 100px; height: 100px; background-color: yellow; } .relative_red{ width: 100px; height: 100px; background-color: red; position: relative; left: 200px; } .black{ width: 100px; height: 100px; background-color: black; } </style> </head> <body> <div class="yellow"></div> <div class="relative_red"></div> <div class="black"></div> </body> </html>
網頁顯示：
為了對比，我們將中間div的relative改為absolute：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>z-index</title> <style type="text/css"> *{ margin: 0px; padding: 0px; } .yellow{ width: 100px; height: 100px; background-color: yellow; } .absolute_red{ width: 100px; height: 100px; background-color: red; position: absolute; left: 200px; } .black{ width: 100px; height: 100px; background-color: black; } </style> </head> <body> <div class="yellow"></div> <div class="absolute_red"></div> <div class="black"></div> </body> </html>
網頁顯示：
我們發現，設置position:relative的div在原來的文檔流上，仍然占有空間，而設置position:absolute的div在文檔流上不再占有空間
2.關於絕對定位元素的補充
- 使用position屬性生成絕對定位元素后（position值為 absolute 或 fixed），該元素同時也會變成一個塊狀元素，無論它之前是什么類型
栗如：
未設置position的<span>標簽
<span style="width: 100px; height: 100px; background-color: red"></span>
盡管給它加了width和height屬性，但它還是作為內聯元素，width和height屬性無效，所以網頁顯示空白
添加position:absolute生成絕對定位元素之后
<span style="width: 100px; height: 100px; background-color: red;position: absolute;"></span>
<span>標簽同時變成了塊狀元素
3.top,right,left,bottom屬性
- top屬性值是指,將元素定位到距離相對位置頂端的距離
- right屬性值是指,定位到距離相對位置右端的距離
- left屬性值是指,定位到距離相對位置左端的距離
- bottom屬性值是指,定位到距離相對位置底端的距離
- 屬性值都可為負數,表示朝反方向定位
4.z-index屬性
因為先寫的定位元素會被后寫的定位元素覆蓋,因此我們需要設置定位元素的堆疊順序,是其按照我們想要的覆蓋方式進行顯示
- z-index屬性用來設置元素的堆疊順序,擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面。
- z-index屬性僅能在具有定位屬性的元素上奏效
- 當z-index為負值時該元素會被標准流中的元素覆蓋
舉個大栗子:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>z-index</title> <style type="text/css"> *{ margin: 0px; padding: 0px; } .red{ width: 100px; height: 100px; background-color: red; position: absolute; top: 0px; left: 0px; z-index: 5; } .black{ width: 100px; height: 100px; background-color: black; position: absolute; top: 0px; left: 0px; z-index: 3; } .blue{ width: 100px; height: 100px; background-color: blue; position: absolute; top: 0px; right: 0px; z-index: -1; } .no-position-yellow{ width: 1500px; height: 1000px; background-color: yellow; } </style> </head> <body> <div class="no-position-yellow"></div> <div class="red"></div> <div class="black"></div> <div class="blue"></div> </body> </html>
網頁顯示:
我們可以看到只有背景為紅色和黃色的元素顯示了,並且紅色元素堆疊在黃色元素上方,因為黑色元素的z-index小於紅色元素的z-index,而它們位置相同,因此紅色元素將黑色元素完全覆蓋了.
對於藍色元素,因為他的z-index為負數,所以它直接被標准流中的黃色元素覆蓋.
四、最后
我理解淺薄，如有錯誤或不足之處還請留言指出，十分感謝！