學習筆記，僅供參考，有錯必糾
參考自：pink老師學習筆記
文章目錄
- 定位
- CSS 布局的三種機制
- 定位詳解
- 邊偏移
- 定位模式 (position)
- 靜态定位(static)
- 相對定位(relative)
- 絕對定位(absolute)
- 固定定位(fixed)
- 使絕對定位的盒子居中
- 堆疊順序(z-index)
- 定位改變display屬性
- 定位小結
定位
CSS 布局的三種機制
CSS 提供了 3 種機制來設定盒子的擺放位置，分别是普通流、浮動和定位，其中被定位的盒子， 自由的漂浮在其他盒子的上面：
由上圖可知，标準流在最底層， 浮動的盒子在中間層 ，定位的盒子在最上層 。
定位詳解
定位有兩部分組成：
定位 = 定位模式 + 邊偏移
邊偏移
我們定位的盒子，是通過邊偏移來移動位置的，在 CSS 中，通過
top
、
bottom
、
left
和
right
屬性定義元素的邊偏移：
| 邊偏移屬性 | 示例 | 描述 |
| | 頂端偏移量，定義元素相對于其父元素上邊線的距離。 |
| | 底部偏移量，定義元素相對于其父元素下邊線的距離。 |
| | 左側偏移量，定義元素相對于其父元素左邊線的距離。 |
| | 右側偏移量，定義元素相對于其父元素右邊線的距離 |
一般情況下，凡是有定位地方必定有邊偏移。
定位模式 (position)
在 CSS 中，通過
position
屬性定義元素的定位模式，文法如下：
選擇器 { position: 屬性值; } 定位模式是有不同分類的，在不同情況下，我們用到不同的定位模式。
| 值 | 語義 |
| 靜态定位 |
| 相對定位 |
| 絕對定位 |
| 固定定位 |
靜态定位(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