CSS基础(part14)--定位
學習筆記，僅供參考，有錯必糾
參考自：pink老師學習筆記
文章目錄
- 定位
- CSS 布局的三種機制
- 定位詳解
- 邊偏移
- 定位模式 (position)
- 靜態定位(static)
- 相對定位(relative)
- 絕對定位(absolute)
- 固定定位(fixed)
- 使絕對定位的盒子居中
- 堆疊順序(z-index)
- 定位改變display屬性
- 定位小結
定位
CSS 布局的三種機制
CSS 提供了 3 種機制來設置盒子的擺放位置，分別是普通流、浮動和定位，其中被定位的盒子， 自由的漂浮在其他盒子的上面：
由上圖可知，標準流在最底層， 浮動的盒子在中間層 ，定位的盒子在最上層 。
定位詳解
定位有兩部分組成：定位 = 定位模式 + 邊偏移
邊偏移
我們定位的盒子，是通過邊偏移來移動位置的，在 CSS 中，通過 top、bottom、left 和 right 屬性定義元素的邊偏移：
| top | top: 80px | 頂端偏移量，定義元素相對于其父元素上邊線的距離。 |
| bottom | bottom: 80px | 底部偏移量，定義元素相對于其父元素下邊線的距離。 |
| left | left: 80px | 左側偏移量，定義元素相對于其父元素左邊線的距離。 |
| right | right: 80px | 右側偏移量，定義元素相對于其父元素右邊線的距離 |
一般情況下，凡是有定位地方必定有邊偏移。
定位模式 (position)
在 CSS 中，通過 position 屬性定義元素的定位模式，語法如下：
選擇器 { position: 屬性值; }定位模式是有不同分類的，在不同情況下，我們用到不同的定位模式。
| static | 靜態定位 |
| relative | 相對定位 |
| absolute | 絕對定位 |
| fixed | 固定定位 |
靜態定位(static)
- 靜態定位是元素的默認定位方式，無定位的意思。它相當于 border 里面的none， 不要定位的時候用.
- 靜態定位 按照標準流特性擺放位置，它沒有邊偏移.
- 靜態定位在布局時我們幾乎不用的.
相對定位(relative)
相對定位是元素相對于自己原來在標準流中位置來移動的，相對定位的元素原來在標準流的區域將繼續被占有，后面的盒子仍然以標準流的方式對待它。
- 舉個例子
HTML代碼：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>定位</title><style>div {width: 100px;height: 100px;}.demo1 {background-color: red;}.demo2 {background-color: blue;}.demo3 {background-color: pink;}</style> </head> <body><div class="demo1"></div><div class="demo2"></div><div class="demo3"></div> </body> </html>頁面：
對demo2添加相對定位，其他代碼不變：
.demo2 {position: relative;left: 50px;top: 20px;background-color: blue; }頁面：
絕對定位(absolute)
絕對定位是元素以帶有定位的父級元素來移動位置。絕對定位是完全脫標的，即完全不占位置的；如果父元素沒有定位，則元素會以瀏覽器為準進行定位；絕對定位的元素依據最近的已經定位（絕對、固定或相對定位）的父元素（祖先）進行定位。
注意！如果 子級是絕對定位，則父級要用相對定位。
- 舉個例子
子類設置絕對定位：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>定位</title><style>.father {width: 200px;height: 200px;margin: 100px;background-color: red;}.son {position: absolute;left: 10px;top: 10px;width: 100px;height: 100px;background-color: blue;}</style> </head> <body><div class="father"><div class="son"></div></div> </body> </html>頁面：
父類添加相對定位，其他代碼不變：：
.father {position: relative;left: 0px;top: 0px;width: 200px;height: 200px;margin: 100px;background-color: red; }頁面：
固定定位(fixed)
固定定位是絕對定位的一種特殊形式，它是完全脫標的，即完全不占位置的；只認瀏覽器的可視窗口，即瀏覽器可視窗口 + 邊偏移屬性 來設置元素的位置，即跟父元素沒有任何關系，可以單獨使用的，不隨滾動條而滾動。
- 舉個例子
HTML代碼：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>定位</title><style>body {height: 1500px;}.demo {width: 300px;height: 300px;margin: 100px;border: 5px solid red;background-color: pink;}img {width: 100px;position: fixed;right: 0px;top: 0px;}.demo2 {width: 200px;height: 200px;}</style> </head> <body><div class="demo"><img src="image/TX.jpg" alt=""></div><div class="demo2">我是div標簽</div> </body> </html>頁面：
向下滑動，可以看到dog頭被固定在瀏覽器右上角，無法離開：
使絕對定位的盒子居中
在使用絕對定位時要想實現水平居中，可以按照下圖的方法：
其中：
-
left: 50%;：讓盒子的左側移動到父級元素的水平中心位置；
-
margin-left: -100px;：讓盒子向左移動自身寬度的一半。
- 舉個例子
HTML代碼：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>定位</title><style>.demo {width: 190px;height: 200px;border: 5px solid red;background-color: pink;position: absolute;left: 50%;margin-left: -100px;}.demo2 {width: 300px;height: 100px;background-color: blue;margin: auto;}</style> </head> <body><div class="demo"></div><div class="demo2"></div> </body> </html>頁面：
堆疊順序(z-index)
在使用定位布局時，可能會出現盒子重疊的情況，加了定位的盒子，默認后來者居上， 后面的盒子會壓住前面的盒子。
應用 z-index 層疊等級屬性可以調整盒子的堆疊順序，如下圖所示：
z-index 的特性如下：
-
屬性值：正整數、負整數或 0，默認值是 0，數值越大，盒子越靠上；
-
如果屬性值相同，則按照書寫順序，后來居上；
-
數字后面不能加單位。
注意：z-index 只能應用于相對定位、絕對定位和固定定位的元素，其他標準流、浮動和靜態定位無效。
- 舉個例子
沒有設置z-index ：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>定位</title><style>div {width: 200px;height: 200px;position: absolute;left: 0px;top: 0px;}.demo1 {background-color: red;}.demo2 {background-color: pink;}.demo3 {background-color: blue;} </style> </head> <body><div class="demo1"></div><div class="demo2"></div><div class="demo3"></div> </body> </html>頁面：
設置了z-index ：
.demo1 {background-color: red;z-index: 0; } .demo2 {left: 50px;top: 50px;background-color: pink;z-index: 2; } .demo3 {left: 100px;top: 100px;background-color: blue;z-index: 1;}頁面：
定位改變display屬性
display是顯示模式， 可以改變顯示模式有以下方式:
- 可以用inline-block 轉換為行內塊；
- 可以應用浮動，將元素默認轉換為行內塊(類似，并不完全一樣，因為浮動是脫標的)；
- 絕對定位和固定定位也和浮動類似， 默認轉換的特性轉換為行內塊。
綜上所述，如果 一個行內的盒子，添加了浮動、固定定位或絕對定位，就可直接設置寬度和高度等屬性。
備注：浮動元素、絕對定位(固定定位)的元素，都不會觸發外邊距合并的問題。
定位小結
| 靜態static | 不脫標，正常模式 | 正常模式 | 不能 | 幾乎不用 |
| 相對定位relative | 不脫標，占有位置 | 相對自身位置移動 | 不能 | 基本單獨使用 |
| 絕對定位absolute | 完全脫標，不占有位置 | 相對于定位父級移動位置 | 能 | 要和定位父級元素搭配使用 |
| 固定定位fixed | 完全脫標，不占有位置 | 相對于瀏覽器移動位置 | 能 | 單獨使用，不需要父級 |
注意事項：
-
邊偏移需要和定位模式聯合使用，單獨使用無效；
-
top 和 bottom 不要同時使用；
-
left 和 right 不要同時使用。
總結
以上是生活随笔為你收集整理的CSS基础(part14)--定位的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 水星 MAC2600R 无线路由器端口映
- 下一篇： CSS基础(part15)--元素的隐藏