定位

視覺格式化模型, 大體上將頁面中盒子的排列分為三種方式:

1. 常規(guī)流
2. 浮動(dòng): float
3. 定位: position

定位: 手動(dòng)控制元素在包含塊中的精準(zhǔn)位置

涉及的CSS屬性: position

position

• 默認(rèn)值: static, 靜態(tài)定位(不定位)
• relative: 相對定位
• absolute: 絕對定位
• fixed: 固定定位

一個(gè)元素, 只要position的取值不是static, 認(rèn)為該元素是一個(gè)定位元素.

定位元素會(huì)脫離文檔流 (常規(guī)流) (相對定位除外)

一個(gè)脫離了文檔流 (常規(guī)流) 的元素:

1. 文檔流中的元素?cái)[放時(shí), 會(huì)忽略脫離了文檔流 (常規(guī)流) 的元素
2. 文檔流中元素計(jì)算自動(dòng)高度時(shí), 會(huì)忽略脫離了文檔流 (常規(guī)流) 的元素

相對定位 relative

不會(huì)導(dǎo)致元素脫離文檔流, 只是讓元素在原來位置上進(jìn)行偏移.

可以通過四個(gè)CSS屬性對其設(shè)置位置

• left
• right
• top
• bottom

盒子的偏移不會(huì)對其他元素造成任何影響.

這里left和margin-left的區(qū)別: 這里的left時(shí)整體移動(dòng),不影響元素寬度, margin-left會(huì)影響元素寬度

絕對定位 absolute

1. 寬高為auto, 適應(yīng)內(nèi)容
2. 包含塊變化: 找祖先元素中第一個(gè)定位元素, 該元素的填充盒為其包含塊 (關(guān)鍵是找包含塊,相對于哪個(gè)元素移動(dòng),就可以把那個(gè)元素的position設(shè)置為relative,在包含塊中移動(dòng)), 若找不到, 則它的包含塊為整個(gè)網(wǎng)頁(初始化包含塊)

固定定位 fixed

其他情況和絕對定位完全一樣.

包含塊不同: 固定為視口 (瀏覽器的可視窗口)

定位下的居中 (absolute fixed)

某個(gè)方向居中:

1. 定寬 (水平方向) 或 定高 (垂直方向)
2. 將左右 (上下) 距離設(shè)置為0
3. 將左右 (上下) margin設(shè)置為auto

絕對定位和固定定位中, margin為auto時(shí), 會(huì)自動(dòng)吸收剩余空間(不要忘記設(shè)置left:0; top:0; right:0; bottom:0)

多個(gè)定位元素重疊時(shí)

堆疊上下文

設(shè)置z-index, 通常情況下, 該值越大, 越靠近用戶

只有定位元素設(shè)置z-index有效

z-index可以是負(fù)數(shù), 如果是負(fù)數(shù), 則遇到常規(guī)流和浮動(dòng)元素, 則會(huì)被覆蓋

補(bǔ)充

• 絕對定位、固定定位元素一定是塊盒，
• 絕對定位、固定定位元素一定不是浮動(dòng)（所以絕對定位、固定定位和浮動(dòng)不能同時(shí)設(shè)置，設(shè)置了，浮動(dòng)也不起作用）
• 沒有外邊距合并