搜尋

首頁  >  文章  >  web前端  >  深入淺析了解CSS中定位佈局的細節

深入淺析了解CSS中定位佈局的細節

WBOY
WBOY原創
2021-12-22 18:32:081731瀏覽

這篇文章為大家帶來了css定位佈局的相關知識，下面我們就來看一下什麼是相對定位、絕對定位以及固定定位不同的元素性質與用途等知識，希望對大家有幫助。

深入淺析了解CSS中定位佈局的細節

1. 相對定位

1.1) 什麼是相對定位

相對定位：盒子可以依照自己原來的位置進行位置調整(透過位置描述詞實現)。

位置描述：
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;
        }

        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中定位佈局的細節
將p 設定成相對定位：

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

深入淺析了解CSS中定位佈局的細節

1.2）相對定位的性質與用途

性質

  • 相對定位的元素，本質上仍在原來的位置，只不過在新的地方渲染出現，不會對頁面其它元素產生影響。

用途

  • 用來微調元素位置
  • 相對定位的盒子可以用來做絕對定位的參考盒子

舉個例子：

nbsp;html>
    <meta>
    <meta>
    <meta>
    <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>
    <nav>
        <ul>
            <li>
                <a>导航一</a>
            </li>
            <li>
                <a>导航二</a>
            </li>
            <li>
                <a>导航三</a>
            </li>
            <li>
                <a>导航四</a>
            </li>
            <li>
                <a>导航五</a>
            </li>
        </ul>
    </nav>

這個時候效果是這樣：
深入淺析了解CSS中定位佈局的細節
會發現滑鼠懸浮在上面的時候，導航那塊區域都會下沉
我們為它設定了相對定位並微調之後：

nav ul li a:hover {
    border-top: 3px solid red;
    position: relative;
    top: -3px;}

深入淺析了解CSS中定位佈局的細節
這樣就可以解決剛剛的問題了

2. 絕對定位

2.1) 什麼是絕對定位

絕對定位：盒子以座標進行位置描述，擁有自己絕對位置。

絕對定位的參考盒子：
絕對定位的盒子會以自己的祖先元素中，離自己最近的擁有定位屬性的盒子，當做基準點。

這個盒子通常是相對定位的，所以也被稱為 「子絕父相」。

位置描述：
left：到左邊的距離；right：到右邊的距離；top：到上邊的距離；bottom：到下邊的距離

舉例：

nbsp;html>
    <meta>
    <meta>
    <meta>
    <title>绝对定位</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            position: absolute;
            width: 500px;
            height: 300px;
            left: 200px;
            top: 100px;
            background-color: antiquewhite;
        }
    </style>
    <p>
    </p>

2.2）絕對定位的性質與用途

絕對定位的盒子垂直居中：

.box {
	position: absolute;
	top: 50%;
	margin-top: -自己高度一半;}

絕對定位的盒子水平居中：

.box {
	position: absolute;
	left: 50%;
	margin-left: -自己宽度一半;}
  • 堆疊順序z-index 屬性
##設定絕對定位元素的壓疊順序.

是一個沒有單位的正整數，數值大的能夠壓住數值小的（即數值大的顯示在上層）

#舉例：

nbsp;html>
    <meta>
    <meta>
    <meta>
    <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>
    <p></p>
    <p></p>
此時效果如下：


<br/>

這時候我們想要讓box1顯示在上層，就設定一個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中定位佈局的細節

    用途
絕對定位用來“壓蓋”，“遮罩」的效果

可以結合CSS 精靈使用
可以結合JS 實現一些動畫

3. 固定定位

3.1) 什麼是固定定位

固定定位：不管頁面如何滾動，它永遠以頁面為參考點，固定在那裡。

位置描述： left：到左邊的距離；right：到右邊的距離；top：到上邊的距離；bottom：到下邊的距離

.box {
	position: fixed;
	top: 100px;
	left: 100px;}

3.2）固定定位的性質與用途

可以用來實現一些元素要一直浮現在當前視窗前，例如瀏覽一個頁面時的返回頂部按鈕，會一直出現在當前頁面的某個位置

舉例：

<!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>

效果如下：

當頁面到下方時，右下角回到頂部的按鈕位置不變。

深入淺析了解CSS中定位佈局的細節

大家有興趣的話，可以繼續訪問：

css影片教學。

以上是深入淺析了解CSS中定位佈局的細節的詳細內容。更多資訊請關注PHP中文網其他相關文章！

css 堆 JS
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：float在css是什麼意思下一篇：float在css是什麼意思

相關文章

看更多