CSS基礎------詳細瞭解position相對定位、絕對定位和固定定位

前言

   上一篇文章瞭解了浮動float 文章地址:https://blog.csdn.net/qazzwx/article/details/104923386

    這篇文章主要了解position屬性 相對定位、絕對定位和固定定位

一、position屬性的定義和用法

1.1、如上圖所示，一個盒子壓住另一個盒子增加層次感用浮動是做不了，如果盒子浮動會並排但不會出現有層級的觀感。所以想要有層級的觀感，就得用定位。定位可以將盒模型中的盒子顯示在我們想要的位置。

1.2、position屬性語法爲：

  <style>
        .div1 {
            position: relative;
            right: 400px;
            top: 50px;
        }
 </style>

常用值如下:

absolute	生成絕對定位的元素，相對於 static 定位以外的第一個父元素進行定位。 元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
fixed	生成絕對定位的元素，相對於瀏覽器窗口進行定位。 元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
relative	生成相對定位的元素，相對於其正常位置進行定位。 因此，"left:20" 會向元素的 LEFT 位置添加 20 像素。
static	默認值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。
inherit	規定應該從父元素繼承 position 屬性的值。

二、使用示例

2.1、相對定位

    實例一

<style>

 .div1 div {
            width: 100px;
            height: 100px;
            background-color: pink;
            float: left;
        }

  .div2 {
            position: relative;/* 相對定位，相對於原來的位置 */
            top: 60px; /* 正數往下，負數往上 bottom反之*/
            left: 100px;/* 正數往右，負數往左 right反之*/
         }

 </style>

 <div></div>
 <div class="div2"></div>
 <div></div>
 <div></div>

  實例二 使用浮動和相對定位製作導航欄

       
<style>
 .div4 {
            width: 400px;
            height: 50px;
            list-style: none;
            text-align: center;
        }

        li {
            list-style: none;
            width: 100px;
            float: left;
            text-align: center;
            line-height: 50px;
            background-color: pink;
        }

        a {
            text-decoration: none;
            display: block;
            color: #000;
        }

        a:hover {
            position: relative;
            bottom: -5px;
            border-bottom: 3px solid yellow;

        }
  </style>

 <div class="div4">
        <li><a href="">首頁</a></li>
        <li><a href="">活動</a></li>
        <li><a href="">專題</a></li>
        <li><a href="">特價</a></li>
    </div>

實例三

<style> 
   span {
            font-size: 12px;
            position: relative;
            top: -5px;
            color: blue;
        }

  .div5 {
            width: 400px;
            height: 50px;
            line-height: 50px;
            text-align: center;
        }
 </style>

 <div class="div5">
        人生 <span>123</span> 路漫漫兮其修遠，<span>456</span> 吾將上下而求索。 
        <span>789</span>
 </div>

相對定位的特徵

          1.相對定位的元素不會脫離文檔流不會改變元素的性質(塊元素仍然是塊元素,行內元素仍然是行內元素)。但是注意一點行內元素                     使用相對定位不能轉行內塊。

          2.相對定位元素會提升一個層級(如果與其他元素髮生重疊 它會在上面)

          3.相對定位設置定位之後其原來的位置還會保留不會被覆蓋，不設置偏移值,.元素則不會有任何變化，所以一般用於元素之間偏移。

          4.子絕父相（父元素相對定位，子元素絕對定位）

          5.相對定位的位置偏移，是從自身位置出發。

2.3、絕對定位

  實例一

<style>
  .div1 div {
            width: 100px;
            height: 100px;
            background-color: pink;
            float: left;
        }

        .div2 {
            position:absolute;/* 相對定位，相對於原來的位置 */
            top: 100px; /* 正數往下，負數往上 bottom反之*/
            left: 60px;/* 正數往右，負數往左 right反之*/
        }
</style>

<div class="div1">
        <div>div1</div>
        <div class="div2">div2</div>
        <div >div3</div>
        <div>div4</div>
    </div>

實例二

<style>
        .div1 {

            width: 500px;
            height: 200px;
            padding: 50px;
            border: 5px solid red;
            text-align: center;
        }

        .div2 {
            width: 400px;
            height: 100px;
            padding: 50px;
            border: 5px solid greenyellow;
            position: relative;
        }

        .div3 {
            width: 300px;
            height: 50px;
            padding: 20px;
            border: 5px solid yellow;
        }

        p {
            width: 20px;
            height: 20px;
            position: absolute;
            top: 0px;
            left: 10px;
            background: green;
        }
    </style>

<div class="div1">
        div1
        <div class="div2">
            div2
            <div class="div3">
                div3
                <p>11</p>
            </div>
        </div>
    </div>

絕對定位的特徵

      1.絕對定位如果不設定任何偏移值,元素位置不會有任何改變。設置偏移值之後元素原來位置會被其他元素佔用(如實例一)

      2.絕對定位會使得元素脫離文檔流，會改變元素的性質.行內元素會變成塊狀元素(因爲會脫離文檔流,也就是脫離文檔流的特性)

     3.絕對定位是相對於離他最近的開啓了定位的元素進行定位的,如果都沒有,則相對於body進行定位(所以通常給父元素也加一個定位)               如實例二

     4.絕對定位也會使得元素提升一個層級

2.4、固定定位

        實例

<style>
        .div1 {
            width: 80px;
            height: 80px;
            background-color: darkorange;
            position: fixed;
            bottom: 100px;
            right: 50px;
        }

        .div2 {
            width: 200px;
            height: 2000px;
        }
</style>

<body>
    <div class="div1">div1</div>
    <div class="div2">div2</div>
</body>

固定定位特徵

     1.固定定位也是絕對定位的一種.擁有絕對定位的大部分特點

     2.固定定位相對於瀏覽器窗口的位置進行定位.比如漂浮的客服,回到頂部.這類的按鈕都是使用的固定定位

三、position層級z-index

   當定位元素重疊，可通過z-index設置層疊次序。

<style>
        .div1 {
            width: 80px;
            height: 80px;
            background-color: darkorange;
            position: absolute;
            top: 100px;
            left: 50px;
            z-index: 3;
        }

        .div2 {
            width: 80px;
            height: 80px;
            position: absolute;
            top: 120px;
            left: 50px;
            background-color: yellow;
           
        }
</style>

<body>
    <div class="div1">div1</div>
    <div class="div2">div2</div>
</body>

未設置 z-index屬性之前                                                                                   設置z-index屬性之後

                                                                         

值得注意的是z-index屬性只對定位元素有效，數值越大層級高，數值相等，以後面的設置的元素爲主，數值大於零時，層級大於浮動，層級爲負時小於浮動相同一層級元素，看父元素，父元素層級大，子元素層級就大。