站長(zhǎng)資訊網(wǎng)本篇文章給大家?guī)砹薱ss定位布局的相關(guān)知識(shí)，下面我們就來看一下什么是相對(duì)定位、絕對(duì)定位以及固定定位不同的元素性質(zhì)與用途等知識(shí)，希望對(duì)大家有幫助。
1.?相對(duì)定位
1.1) 什么是相對(duì)定位
相對(duì)定位：盒子可以根據(jù)自己原來的位置進(jìn)行位置調(diào)整(通過位置描述詞實(shí)現(xiàn))。
位置描述詞：
left: 向右移動(dòng)； right 向左移動(dòng)；top 向下移動(dòng)；bottom 向上移動(dòng)
（當(dāng)里面值為負(fù)數(shù)的時(shí)候，往相反方向移動(dòng)）
舉個(gè)例子：
原來：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>相對(duì)定位</title> <style> * { margin: 0; padding: 0; } p { width: 500px; height: 500px; border: 1px solid #000; margin: 50px auto; } p { width: 100px; height: 100px; background-color: lightblue; position: relative; top: 50px; left: 50px; } </style></head><body> <p> <p></p> </p></body></html>
將 p 設(shè)置成相對(duì)定位：
p { width: 100px; height: 100px; background-color: lightblue; position: relative; top: 50px; left: 50px;}
1.2）相對(duì)定位的性質(zhì)與用途
性質(zhì)
- 相對(duì)定位的元素，本質(zhì)上仍在原來的位置，只不過在新的地方渲染出現(xiàn)，不會(huì)對(duì)頁面其它元素產(chǎn)生影響。
用途
- 用來微調(diào)元素位置
- 相對(duì)定位的盒子可以用來做絕對(duì)定位的參考盒子
舉個(gè)例子：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>相對(duì)定位</title> <style> * { margin: 0; padding: 0; } nav { width: 780px; height: 50px; margin: 40px auto; } nav ul { list-style: none; } nav ul li { float: left; width: 156px; height: 50px; line-height: 50px; text-align: center; } nav ul li a { display: block; width: 156px; height: 50px; background-color: lightcyan; color: #000; text-decoration: none; } nav ul li a:hover { border-top: 3px solid red; } </style></head><body> <nav> <ul> <li> <a href="#">導(dǎo)航一</a> </li> <li> <a href="#">導(dǎo)航二</a> </li> <li> <a href="#">導(dǎo)航三</a> </li> <li> <a href="#">導(dǎo)航四</a> </li> <li> <a href="#">導(dǎo)航五</a> </li> </ul> </nav></body></html>
這個(gè)時(shí)候效果是這樣：
會(huì)發(fā)現(xiàn)鼠標(biāo)懸浮在上面的時(shí)候，導(dǎo)航那一塊區(qū)域都會(huì)下沉
我們給它設(shè)置了相對(duì)定位并微調(diào)之后：
nav ul li a:hover { border-top: 3px solid red; position: relative; top: -3px;}
這樣就可以解決剛剛的問題了
2.?絕對(duì)定位
2.1) 什么是絕對(duì)定位
絕對(duì)定位：盒子以坐標(biāo)進(jìn)行位置描述，擁有自己絕對(duì)位置。
絕對(duì)定位的參考盒子：
絕對(duì)定位的盒子會(huì)以自己的祖先元素中，離自己最近的擁有定位屬性的盒子，當(dāng)做基準(zhǔn)點(diǎn)。
這個(gè)盒子通常是相對(duì)定位的，所以也被稱作 “子絕父相”。
位置描述詞：
left：到左邊的距離；right：到右邊的距離；top：到上邊的距離；bottom：到下邊的距離
舉個(gè)例子：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>絕對(duì)定位</title> <style> * { margin: 0; padding: 0; } .box { position: absolute; width: 500px; height: 300px; left: 200px; top: 100px; background-color: antiquewhite; } </style></head><body> <p class="box"> </p></body></html>
2.2）絕對(duì)定位的性質(zhì)與用途
絕對(duì)定位的盒子垂直居中：
.box { position: absolute; top: 50%; margin-top: -自己高度一半;}
絕對(duì)定位的盒子水平居中：
.box { position: absolute; left: 50%; margin-left: -自己寬度一半;}
- 堆疊順序 z-index 屬性
設(shè)置絕對(duì)定位元素的壓疊順序.
是一個(gè)沒有單位的正整數(shù)，數(shù)值大的能夠壓住數(shù)值小的（即數(shù)值大的顯示在上層）
舉個(gè)例子：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>絕對(duì)定位</title> <style> * { margin: 0; padding: 0; } .box1 { width: 300px; height: 300px; position: absolute; left: 100px; top: 100px; background-color: antiquewhite; } .box2 { width: 300px; height: 300px; position: absolute; left: 200px; top: 200px; background-color: lightblue; } </style></head><body> <p class="box1"></p> <p class="box2"></p></body></html>
此時(shí)效果如下：
這個(gè)時(shí)候我們想讓box1顯示在上層，就設(shè)置一個(gè)z-index 屬性。
.box1 { width: 300px; height: 300px; position: absolute; left: 100px; top: 100px; background-color: antiquewhite; z-index: 100;}.box2 { width: 300px; height: 300px; position: absolute; left: 200px; top: 200px; background-color: lightblue; z-index: 1;}
看看效果：
- 用途
絕對(duì)定位用來“壓蓋”，“遮罩”的效果
可以結(jié)合 CSS 精靈使用
可以結(jié)合 JS 實(shí)現(xiàn)一些動(dòng)畫
3.?固定定位
3.1) 什么是固定定位
固定定位：不管頁面如何滾動(dòng)，它永遠(yuǎn)以頁面為參考點(diǎn)，固定在那里。
位置描述詞：
left：到左邊的距離；right：到右邊的距離；top：到上邊的距離；bottom：到下邊的距離
.box { position: fixed; top: 100px; left: 100px;}
3.2）固定定位的性質(zhì)與用途
可以用來實(shí)現(xiàn)一些元素要一直浮現(xiàn)在當(dāng)前窗口前，比如瀏覽一個(gè)頁面時(shí)的返回頂部按鈕，會(huì)一直出現(xiàn)在當(dāng)前頁面的某個(gè)位置
舉個(gè)例子：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>固定定位</title> <style> * { margin: 0; padding: 0; } .box { position: fixed; bottom: 20px; right: 20px; width: 40px; height: 40px; text-align: center; line-height: 40px; border-radius: 50%; background-color: rgba(78, 209, 226, 0.5); cursor: pointer; font-size: 24px; } </style></head><body> <a class="box">^</a> <p> <img src="https://dummyimage.com/600x400/00bcd4/fff" alt=""> </p> <p> <img src="https://dummyimage.com/600x400/00bcd4/fff" alt=""> </p> <p> <img src="https://dummyimage.com/600x400/00bcd4/fff" alt=""> </p></body></html>
效果如下：
當(dāng)頁面到下方時(shí)，右下角返回頂部的按鈕位置不變。
大家感興趣的話，可以繼續(xù)訪問：css視頻教程。
