站長資訊網(wǎng)
最全最豐富的資訊網(wǎng)站

深入淺析了解CSS中定位布局的細(xì)節(jié)

本篇文章給大家?guī)砹薱ss定位布局的相關(guān)知識(shí),下面我們就來看一下什么是相對(duì)定位、絕對(duì)定位以及固定定位不同的元素性質(zhì)與用途等知識(shí),希望對(duì)大家有幫助。

深入淺析了解CSS中定位布局的細(xì)節(jié)

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>

深入淺析了解CSS中定位布局的細(xì)節(jié)
將 p 設(shè)置成相對(duì)定位:

p {     width: 100px;     height: 100px;     background-color: lightblue;     position: relative;     top: 50px;     left: 50px;}

深入淺析了解CSS中定位布局的細(xì)節(jié)

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í)候效果是這樣:
深入淺析了解CSS中定位布局的細(xì)節(jié)
會(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;}

深入淺析了解CSS中定位布局的細(xì)節(jié)
這樣就可以解決剛剛的問題了


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;}

看看效果:
深入淺析了解CSS中定位布局的細(xì)節(jié)

  • 用途

絕對(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í),右下角返回頂部的按鈕位置不變。
深入淺析了解CSS中定位布局的細(xì)節(jié)

大家感興趣的話,可以繼續(xù)訪問:css視頻教程。

贊(0)
分享到: 更多 (0)
網(wǎng)站地圖   滬ICP備18035694號(hào)-2    滬公網(wǎng)安備31011702889846號(hào)
日韩视频在线观看一区二区| 91成人午夜在线精品| 精品人妻少妇一区二区| 中文字幕无码亚洲欧洲日韩| 国产精品综合一区二区三区| 亚洲精品无码你懂的| 精品国产第一国产综合精品| 久久99精品久久久久久动态图| 亚洲精品你懂的在线观看| 国产高清在线精品一区二区| 日韩一级在线播放| 日韩国产中文字幕| 午夜国产精品久久影院| 国产精品老熟女露脸视频| 国产精品一区二区久久精品涩爱| 精品久久久久久中文字幕人妻最新| 99精品视频免费在线观看| 午夜精品乱人伦小说区| 国产精品视频色拍拍| 国产在线不卡午夜精品2021| 亚洲精品无码鲁网中文电影| 老司机精品视频在线| 久久er国产精品免费观看8| 国产精品嫩草影院久久| 亚洲精品国产福利一二区| 日批日出水久久亚洲精品tv| 思思久久99热免费精品6| 蜜桃导航一精品导航站| 亚洲国产日韩女人aaaaaa毛片在线| 日韩精品成人a在线观看| 午夜精品久久久久久久99| 日韩在线观看网站| AV在线播放日韩亚洲欧| 亚洲欧洲日韩不卡| 日韩高清在线免费观看| 精品人妻一区二区三区四区在线| 日韩a级一片在线观看| 免费精品国产自产拍在线观看| 天天爽夜夜爽夜夜爽精品视频| 亚洲国产精品自在拍在线播放| 亚洲精品国自产拍在线观看|