CSS學習筆記之position屬性
一、前言
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標簽的下方,因為它是相對於在標準流中原來的位置進行定位的.
因此可以認為相對定位元素仍處於正常的標準流當中,不能破壞標準流布局的規則
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屬性的父標簽約束,顯示在父標簽的區域內,這也是fixed與absolute的一個重要區別
但我們還是可以認為,屬性值為absolute的子標簽也顯示在了top:0px; left:0px;位置.只不過它是相對於父標簽進行定位的
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>的右下方
2.top,right,left,bottom屬性
- top屬性值是指,將元素定位到距離相對位置頂端的距離
- right屬性值是指,定位到距離相對位置右端的距離
- left屬性值是指,定位到距離相對位置左端的距離
- bottom屬性值是指,定位到距離相對位置底端的距離
- 屬性值都可為負數,表示朝反方向定位
3.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為負數,所以它直接被標準流中的黃色元素覆蓋.
CSS學習筆記之position屬性