溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“CSS中定位布局的細(xì)節(jié)有哪些”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“CSS中定位布局的細(xì)節(jié)有哪些”吧！
相對定位：盒子可以根據(jù)自己原來的位置進(jìn)行位置調(diào)整(通過位置描述詞實現(xiàn))。
位置描述詞：
left: 向右移動； right 向左移動；top 向下移動；bottom 向上移動
（當(dāng)里面值為負(fù)數(shù)的時候，往相反方向移動）
舉個例子：
原來：
<!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;
}
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è)置成相對定位：
p {
width: 100px;
height: 100px;
background-color: lightblue;
position: relative;
top: 50px;
left: 50px;}
性質(zhì)
相對定位的元素，本質(zhì)上仍在原來的位置，只不過在新的地方渲染出現(xiàn)，不會對頁面其它元素產(chǎn)生影響。
用途
用來微調(diào)元素位置
相對定位的盒子可以用來做絕對定位的參考盒子
舉個例子：
<!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;
}
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>這個時候效果是這樣：
會發(fā)現(xiàn)鼠標(biāo)懸浮在上面的時候，導(dǎo)航那一塊區(qū)域都會下沉
我們給它設(shè)置了相對定位并微調(diào)之后：
nav ul li a:hover {
border-top: 3px solid red;
position: relative;
top: -3px;}
這樣就可以解決剛剛的問題了
絕對定位：盒子以坐標(biāo)進(jìn)行位置描述，擁有自己絕對位置。
絕對定位的參考盒子：
絕對定位的盒子會以自己的祖先元素中，離自己最近的擁有定位屬性的盒子，當(dāng)做基準(zhǔn)點。
這個盒子通常是相對定位的，所以也被稱作 “子絕父相”。
位置描述詞：
left：到左邊的距離；right：到右邊的距離；top：到上邊的距離；bottom：到下邊的距離
舉個例子：
<!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: absolute;
width: 500px;
height: 300px;
left: 200px;
top: 100px;
background-color: antiquewhite;
}
</style></head><body>
<p class="box">
</p></body></html>絕對定位的盒子垂直居中：
.box {
position: absolute;
top: 50%;
margin-top: -自己高度一半;}絕對定位的盒子水平居中：
.box {
position: absolute;
left: 50%;
margin-left: -自己寬度一半;}堆疊順序 z-index 屬性
設(shè)置絕對定位元素的壓疊順序.
是一個沒有單位的正整數(shù)，數(shù)值大的能夠壓住數(shù)值小的（即數(shù)值大的顯示在上層）
舉個例子：
<!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;
}
.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>此時效果如下：
這個時候我們想讓box1顯示在上層，就設(shè)置一個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;}看看效果：
用途
絕對定位用來“壓蓋”，“遮罩”的效果
可以結(jié)合 CSS 精靈使用
可以結(jié)合 JS 實現(xiàn)一些動畫
固定定位：不管頁面如何滾動，它永遠(yuǎn)以頁面為參考點，固定在那里。
位置描述詞：
left：到左邊的距離；right：到右邊的距離；top：到上邊的距離；bottom：到下邊的距離
.box {
position: fixed;
top: 100px;
left: 100px;}可以用來實現(xiàn)一些元素要一直浮現(xiàn)在當(dāng)前窗口前，比如瀏覽一個頁面時的返回頂部按鈕，會一直出現(xiàn)在當(dāng)前頁面的某個位置
舉個例子：
<!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)頁面到下方時，右下角返回頂部的按鈕位置不變。
感謝各位的閱讀，以上就是“CSS中定位布局的細(xì)節(jié)有哪些”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對CSS中定位布局的細(xì)節(jié)有哪些這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼