css 佈局之 4種 position 佈局講解

css position 佈局當中幾個重要的概念

1. 標準流
2. 定位和參數
3. 使用 position 實現網頁佈局
4. 層級關係

一、HTML 中的佈局方式

• 標準流 （默認佈局）
• 浮動
• 定位

1.1 HTML 中的兩大元素

常見塊級元素	常見內聯元素
div	a
h1~h6	span
有序，無序列表 ol、ul、li	img
table	input
p段落	…

塊級元素特點：

獨佔一行

內聯元素特點：

和相臨元素在同一行，一行不夠時，纔會被擠到下一行

1.2 兩大元素佈局演示

1. 塊級元素（使用 div）
   
2. 內聯元素的使用 （span）
   
   以上的佈局就是我最常見的標準流佈局

二、定位佈局

2.1 postition 屬性

2.1.1 position 屬性意義

• position 屬性決定了元素如何定位
• 通過 top，right，bottom，left 實現位置的改變

2.1.2 position 可選參數

position 參數	解釋
static	默認值，元素按照標準流正常的顯示
relative	相對定位，元素依然處於正常的文檔流中，可以通過 left ， right，bottom，top 改變元素的位置
absolute	絕對定位，元素脫離文檔流，可以通過 left ， right，bottom，top 改變元素的位置，它會基於遊覽器的四個邊角進行定位
fixed	固定定位，使用 top，left，right，bottom 定位，會脫離正常文檔流，不受標準流的約束，並擁有層級的概念
inherit	會繼承父元素的屬性

2.2 relative

relative 的特點可以通過 left，right，top，bottom 移動元素，並且後寫的元素會覆蓋先寫的元素，這樣層級的概念就出來了

left，top 屬性可以理解爲 div 左上角爲基準移動
right，bottom 屬性可以理解爲 div 右下角爲基準移動

2.3 absolute

使用了 absolute 的元素會脫離文檔流（如果我們查看這個 test div 的高度會發現爲 0），可以使用 top，right，bottom，left 進行調整，同樣後寫的元素會覆蓋先寫的元素

注意：

position 以遊覽器四個邊角爲基準

2.4 fixed

使用 fixed 固定定位的元素不會受其它元素的約束，它也是以遊覽器的四個邊角爲基準，但是當頁面發生滾動的時候，使用 fixed 定位的元素，會依然在頁面中的位置固定不動，類比 一些廣告

這裏就不單獨演示 固定定位的佈局了

接下來看一下 固定定位 和 絕對定位的區別

test 作爲子元素，依舊會固定在距離頂部和左邊 50px 的位置

2.5 inherit

子元素會繼承父元素的定位屬性，父元素的變化，子元素也會相對變化

三、z-index

有了 z-index 我們可以手動指定 層級的優先級

• 可以設置元素的疊加順序，但依賴定位屬性
• z-index大的元素會覆蓋z-index小的元素
• z-index爲auto的元素不參與層級比較
• z-index爲負值，元素被普通流中的元素覆蓋

這裏一般後者的元素的層級會更高