來源于視頻教程:
浮動和定位
- 浮動可以讓多個(gè)塊級盒子一行沒有縫隙的排列顯示柑晒,經(jīng)常用于橫向排列盒子
- 定位可以讓盒子自由自在的在某個(gè)盒子內(nèi)移動位置或者固定屏幕中某個(gè)位置,并且可以壓住其他盒子
定位組成
定位 = 定位模式 + 邊偏移
定位模式用于指定一個(gè)元素在文檔中的定位方式比原,邊偏移則決定了該元素的最終位置。
定位模式通過CSS的position屬性來設(shè)置康愤,其值可以分為四個(gè):
值 | 語義 |
---|---|
static | 靜態(tài)定位 |
relative | 相對定位 |
absolute | 絕對定位 |
fixed | 固定定位 |
邊偏移,盒子移動到的最終位置。有top泄鹏,bottom实胸,left和right4格屬性
邊偏移屬性 | 示例 | 描述 |
---|---|---|
top | top:80px | 頂端相對于父元素上邊線偏移量 |
bottom | bottom:80px | 底部相對于其父元素下邊線的偏移量 |
left | left:80px; | 左側(cè)相對于父元素左邊線的偏移量 |
right | right:80px | 右邊相對于父元素右邊線的偏移量 |
靜態(tài)定位static(了解)
靜態(tài)定位是元素的默認(rèn)定位方式他嫡,無定位的意思
選擇器{ position: static; }
- 靜態(tài)定位按照標(biāo)準(zhǔn)流特性擺放位置,它沒有邊移量
- 靜態(tài)定位在布局時(shí)很少用到
相對定位relative(重要)
相對定位是元素在移動位置的時(shí)候庐完,是相對于它原來的位置移動的钢属。
選擇器 { position: relative; }
相對定位的特點(diǎn):
- 它是相對于自己原來的位置來移動的(移動位置的時(shí)候參照點(diǎn)是自己原來的位置)
- 原來在標(biāo)準(zhǔn)流的位置繼續(xù)占有,后面的盒子仍然以標(biāo)準(zhǔn)流的方式對待它(不脫標(biāo)门躯,繼續(xù)保留原來的位置)
- 典型的應(yīng)用相對定位淆党,用來給絕對定位當(dāng)?shù)?/li>
絕對定位absolute(重要)
絕對定位是相對于它祖先元素偏移的
選擇器 { position:absolute; }
絕對定位的特點(diǎn):
- 如果沒有祖先元素或者祖先元素沒有定位(relative、absolute讶凉、fixed)宁否,則以瀏覽器為準(zhǔn)定位
- 如果祖先元素有定位(相對、絕對缀遍、固定定位)慕匠,則以最近一級的有定位的祖先元素為參考點(diǎn)移動位置
- 絕對定位不再占有原來的位置,脫標(biāo)
- 子絕父相
- 絕對定位(固定定位)會完全壓住盒子
浮動元素不同域醇,只會壓住它下面標(biāo)準(zhǔn)的盒子台谊,但是不會壓住下面標(biāo)準(zhǔn)盒子里面的文字(圖片)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
float:left;
width:150px;
height:150px;
background-color: red;
}
</style>
</head>
<body>
<div></div>
<p>啦啦啦啦啦啦啦啦</p>
<img src="imageName.jpg"/>
</body>
</html>
這是因?yàn)楦赢a(chǎn)生最初的目的是文字環(huán)繞效果的,讓文字環(huán)繞圖片的譬挚。讓div浮動不是壓住文字和圖片锅铅,是為了讓它們圍繞著div。
但是絕對定位(固定定位)會壓住下面標(biāo)準(zhǔn)所有的內(nèi)容减宣。
把上面樣式改為:
div{
position:fixed;
width:150px;
height:150px;
background-color: red;
}
結(jié)果p標(biāo)簽和img全部被壓住在div下面
- 如果絕對定位元素既有一個(gè)left屬性也有right屬性盐须,則默認(rèn)會執(zhí)行l(wèi)eft屬性,同理漆腌,有top和bottom屬性贼邓,則執(zhí)行top屬性**
- 加了絕對定位的盒子可以直接設(shè)置高度和寬度**
固定定位fixed(重要)
固定定位是元素固定于瀏覽器可視區(qū)的位置。主要使用場景:可以在瀏覽器頁面滾動時(shí)元素的位置不會改變
選擇器 { position: fixed; }
固定定位的特點(diǎn):
- 以瀏覽器的可視窗口為參照點(diǎn)移動元素
跟父元素沒有任何關(guān)系
不隨滾動條滾動 - 固定定位不再占有原先的位置闷尿,脫標(biāo)
固定定位也是脫標(biāo)的塑径,可以看作是一種特殊的絕對定位
固定定位小技巧:固定在版心右側(cè)位置
小算法:
- 讓固定定位的盒子left:50%,走到瀏覽器可視區(qū)(也可以看作版心)的一半位置
- 讓固定定位的盒子margin-left:版心寬度的一般距離填具。多走版心寬度的一半位置
就可以讓固定定位的盒子貼著版心右側(cè)對齊了
粘性定位sticky(了解)
粘性定位可以被認(rèn)為是相對定位和固定定位的混合统舀。Sticky粘性的
選擇器 { position: sticky; top: 10px; }
粘性定位的特點(diǎn):
- 以瀏覽器的可視窗口為參照點(diǎn)移動元素(固定定位特點(diǎn))
- 粘性定位占有原先的位置(相對定位特點(diǎn))
- 必須添加top、left、right誉简、bottom其中一個(gè)才有效
跟頁面滾動搭配使用碉就。兼容性較差,IE不支持
四種模式總結(jié)
定位模式 | 是否脫標(biāo) | 移動位置 | 是否常用 |
---|---|---|---|
static | 否 | 不能使用邊偏移 | 很少 |
relative | 否(占有位置) | 相對于自身位置移動 | 常用 |
absolute | 是(不占有位置) | 帶有定位的父級 | 常用 |
fixed | 是(不占有位置) | 瀏覽器可視區(qū) | 常用 |
sticky | 否(占有位置) | 瀏覽器可視區(qū) | 當(dāng)前階段少 |
定位疊放次序z-index
在使用定位布局時(shí)闷串,可能會出現(xiàn)盒子重疊的情況瓮钥。此時(shí),可以使用z-index來控制盒子的前后次序(z軸)
選擇器 { z-index: 1; }
- 數(shù)值可以是正整數(shù)窿克、負(fù)整數(shù)或0骏庸,默認(rèn)是auto毛甲,數(shù)值越大年叮,盒子越靠上
- 如果屬性值相同,則按照書寫順序玻募,后來居上
- 數(shù)字后面不能加單位
- 只有定位的盒子才有z-index屬性
絕對定位的盒子居中
加了絕對定位的盒子不能通過margin:0 auto;水平居中只损,但是可以通過以下計(jì)算方式實(shí)現(xiàn)水平和垂直居中。
- left:50%;讓盒子的左側(cè)移動到父級元素的水平中心位置
- margin-left:-100px;讓盒子向左移動自身寬度的一半七咧。
定位特殊特性
絕對定位和固定定位也和浮動類似
- 行內(nèi)元素添加絕對或者固定定位跃惫,可以直接設(shè)置高度和寬度。
- 塊級元素添加絕對或者固定定位艾栋,如果不給寬度或者高度爆存,默認(rèn)大小是內(nèi)容的大小
- 脫標(biāo)的盒子不會觸發(fā)外邊距塌陷
浮動元素、絕對定位蝗砾、固定定位的元素都不會觸發(fā)外邊距合并的問題