web前端之CSS技術（四）
續web前端之CSS技術（一）
續web前端之CSS技術（二）
續web前端之CSS技術（三）
11. 定位
11.1 爲什麼需要定位
- 浮動可以讓多個塊級盒子一行沒有縫隙排列顯示， 經常用於橫向排列盒子。
- 定位則是可以讓盒子自由的在某個盒子內移動位置或者固定屏幕中某個位置，並且可以壓住其他盒子。
11.2 定位組成
- 定位：將盒子定在某一個位置，所以定位也是在擺放盒子， 按照定位的方式移動盒子。
- 定位 = 定位模式 + 邊偏移 。
- 定位模式用於指定一個元素在文檔中的定位方式。邊偏移則決定了該元素的最終位置。
11.3 定位模式
定位模式決定元素的定位方式 ，它通過 CSS 的 position 屬性來設置，其值可以分爲四個：
| 值 | 語義 |
|---|---|
static |
靜態定位 |
relative |
相對定位 |
absolute |
絕對定位 |
fixed |
固定定位 |
11.4 邊偏移
邊偏移就是定位的盒子如何移動。有top、left、bottom和right四個屬性。
| 邊偏移屬性 | 描述 |
|---|---|
top |
頂端偏移量，定義元素相對於其父元素上邊線的距離 |
left |
左側偏移量，定義元素相對於其父元素左邊線的距離 |
bottom |
底部偏移量，定義元素相對於其父元素下邊線的距離 |
right |
右側偏移量，定義元素相對於其父元素右邊線的距離 |
11.5 靜態定位 static
靜態定位是元素的默認定位方式，無定位的意思。
-
語法：
選擇器 { position: static; } -
解釋：
· 靜態定位按照標準流特性擺放位置，它沒有邊偏移
· 靜態定位在佈局時很少用到
11.6 相對定位 relative
相對定位是元素在移動位置的時候，是相對於它原來的位置來說的。
-
語法：
選擇器 { position: relative; } -
解釋：
· 它是相對於自己原來的位置來移動的（移動位置的時候參照點是自己原來的位置）。
· 原來在標準流的位置繼續佔有，後面的盒子仍然以標準流的方式對待它。
11.7 絕對定位 absolute
絕對定位是元素在移動位置的時候，是相對於它祖先元素來說的。
-
語法：
選擇器 { position: absolute; } -
解釋：
· 如果沒有祖先元素或者祖先元素沒有定位，則以瀏覽器爲準定位。
· 如果祖先元素有定位（相對、絕對、固定定位），則以最近一級的有定位祖先元素爲參考點移動位置。
· 絕對定位不再佔有原先的位置。（脫標）
11.8 固定定位 fixed
固定定位是元素固定於瀏覽器可視區的位置。
主要使用場景： 可以在瀏覽器頁面滾動時元素的位置不會改變。
-
語法：
選擇器 { position: fixed; } -
解釋：
· 以瀏覽器的可視窗口爲參照點移動元素。
· 固定定位不再佔有原先的位置。
· 固定定位也是脫標的，其實固定定位也可以看做是一種特殊的絕對定位。
11.9 粘性定位 sticky
粘性定位可以被認爲是相對定位和固定定位的混合。
-
語法：
選擇器 { position: sticky; top: 10px; } -
解釋：
· 以瀏覽器的可視窗口爲參照點移動元素（固定定位特點）。
· 粘性定位佔有原先的位置（相對定位特點）。
· 必須添加top、left、right、bottom其中一個纔有效。
· 跟頁面滾動搭配使用。 兼容性較差，IE 不支持
11.10 子絕父相
-
含義：
子級是絕對定位的話，父級要用相對定位
-
解釋：
· 子級絕對定位，不會佔有位置，可以放到父盒子裏面的任何一個地方，不會影響其他的兄弟盒子
· 父盒子需要加定位限制子盒子在父盒子內顯示
· 父盒子佈局時，需要佔有位置，因此父親只能是相對定位 -
總結：
因爲父級需要佔有位置，因此是相對定位，子盒子不需要佔有位置，則是絕對定位
11.11 定位總結
| 定位模式 | 是否脫標 | 移動位置 |
|---|---|---|
static靜態定位 |
否 | 不能使用邊偏移 |
relative相對定位 |
否（佔有位置） | 相對於自身位置移動 |
absolute絕對定位 |
是（不佔有位置） | 帶有定位的父級 |
fixed固定定位 |
是（不佔有位置） | 瀏覽器可視區 |
sticky粘性定位 |
否（佔有位置） | 瀏覽器可視區 |
11.12 定位疊放次序 z-index
在使用定位佈局時，可能會出現盒子重疊的情況。此時，可以使用 z-index 來控制盒子的前後次序 (z軸)。
-
語法：
選擇器 { z-index: n; } -
解釋：
·n數值可以是正整數、負整數或 0, 默認是 auto，數值越大，盒子越靠上
· 如果屬性值相同，則按照書寫順序，後來居上
· 數字後面不能加單位
· 只有定位的盒子纔有z-index屬性
12. 網頁佈局總結
12.1 標準流
可以讓盒子上下排列或者左右排列，垂直的塊級盒子顯示就用標準流佈局。
12.2 浮動
可以讓多個塊級元素一行顯示或者左右對齊盒子，多個塊級盒子水平顯示就用浮動佈局。
12.3 定位
定位最大的特點是有層疊的概念，就是可以讓多個盒子前後疊壓來顯示。如果元素自由在某個盒子內移動就用定位佈局。
13. 元素的顯示與隱藏
本質：讓一個元素在頁面內顯示或隱藏。
13.1 display屬性
display屬性用於設置一個元素應如何顯示。
· display: none; ：隱藏對象
· display：block; ：除了轉換爲塊級元素之外，同時還有顯示元素的意思
display屬性隱藏元素後，不再佔有原來的位置。
13.2 visibility屬性
visibility屬性用於指定一個元素應可見還是隱藏。
· visibility: visible; ：元素可視
· visibility: hidden; ：元素隱藏
visibility隱藏元素後，繼續佔有原來的位置。- 如果隱藏元素想要原來位置， 就用
visibility: hidden; - 如果隱藏元素不想要原來位置， 就用
display: none;
13.3 overflow屬性
overflow屬性指定了如果內容溢出一個元素的框（超過其指定高度及寬度） 時，會怎麼做。
| 屬性值 | 描述 |
|---|---|
visible |
不剪切內容，也不增加滾動條 |
hidden |
不顯示超過對象尺寸的內容，超出的部分隱藏掉 |
scroll |
不管內容有沒有超出對象尺寸，都顯示滾動條 |
auto |
內容超出對象尺寸自動顯示滾動條，不超出則不顯示 |