css中的絕對定位與相對定位-有解無憂

position:relative

元素框偏移某個距離，元素仍保持其未定位前的形狀，它原本所占的空間仍保留，

position:absolute

元素框從檔案流完全洗掉，并相對于其包含塊定位，包含塊可能是檔案中的另一個元素或者是初始包含塊，元素原先在正常檔案流中所占的空間會關閉，就好像元素原來不

存在一樣，元素定位后生成一個塊級框，而不論原來它在正常流中生成何種型別的框.

這是對二者的定義，其實絕對定位還是比較好理解，定義某個標簽的屬性為絕對定位后，位置的改變都是相對于原來的位置進行的，仍然位于檔案流中，

其實體如下：

https://www.w3school.com.cn/tiy/t.asp?f=csse_position_relative

而對絕對定位來說，定義這個屬性后，內容就脫離檔案流了，如果正常檔案流中一個位置有東西，那我用絕對定位后，還在這個位置可以再添加元素，這個元素并不在檔案流中，而相對定位則不可以，它會把元素往后排，

針對在我進行網頁設計的時候遇到過的問題，對于一個div或者其他塊來說，盡量不要把其中的html元素有的不定義這個屬性，有點定義，這樣在你設計排版的時候很容易亂掉的，

還有就我在寫html檔案的時候，想對網頁進行自適應的修改，當我改變瀏覽器視窗大小的時候，沒處理好這個問題就導致了網頁元素亂掉，要注意對于絕對定位的元素，其大小和位置的參照是上一級的父元素，

這一點很重要，父元素間不能搞混了，不然很容易出錯，具體代碼解釋可看下面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

body{ background-color: yellow; }



    div{
           position: absolute;
           width: 20%;
           height: 20%;
           left: 30%;
           background-color: black;
       }
    p{
        position: absolute;
        left: 30%;
        width: 20%;
        height: 20%;
        background-color:white;
    }

    </style>
</head>
<body>
    <div class="a">
           <p class="b"></p>
    </div>
</body>
</html>

效果是這樣的：

最后提供一位網友的文章，講的很好很透徹，

https://www.jianshu.com/p/a3da5e27d22b

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/72068.html

標籤：Html/Css

上一篇：如何避免FOUC，是如何產生的

下一篇：網頁的自適應設計與背景居中