css3——position定位詳解

時間 2020-09-09

標籤 css3 css position 定位詳解欄目 CSS 简体版

原文原文鏈接

最近熱衷於前端的開發，由於忽然發現雖然對於網站、應用來講，功能處於絕對重要的地位，可是用戶體驗對於用戶來說一樣是那麼的重要，能夠說是第一印象。最近在開發當中發現之前對於css中的position的理解有些偏頗，在這裏分享一下這幾天的學習。css

首先整體介紹一下接下來要分析的position屬性的兩個值：absolute和relative（絕對定位和相對定位），html

絕對定位：一、當某元素使用絕對定位而且未設置top，left的值時，實際上並未真正脫離文檔流，二、使用絕對定位而且設置了top，left時，這才脫離了文檔流，並以最外層body元素做爲父容器，前端

相對定位：一、當某元素使用相對定位時，不管設不設置top，left的值，都不會脫離文檔流瀏覽器

接下來以實驗論證個人觀點，貼出一段實驗小代碼函數

<!DOCTYPE html>  
  
<html>  
<head >  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  
    <title></title>  
</head>  
    <body onload="init();">  
        <div style="width: 400px;height:400px;border: cadetblue 2px solid;">  
            <div style="width: 300px;height: 30px;border: 2px solid red;">  
                  
            </div>  
            <div style="position: absolute;width: 80px;height: 30px;border: 2px solid orange;" id="absolute">  
                  
            </div>  
            <div style="position: relative;width: 160px;height: 60px;border: 2px solid blueviolet;left: 150px;" id="relative">  
                  
            </div>  
        </div>  
    </body>  
    <script>  
        function init(parameters) {  
            var absoluteStr = "absolute :top=" + absolute.offsetTop + ",left=" + absolute.offsetLeft;  
            absolute.innerHTML = absoluteStr;  
              
            var relativeStr = "relative :top=" + relative.offsetTop + ",left=" + relative.offsetLeft;  
            relative.innerHTML = relativeStr;  
        }  
    </script>  
</html>

相信這個就不用多作解釋了，外層一個div，裏面有三個div，第一個是普通div，接下來一個id是absolute，另外一個是relative，擺明了就是分別測試absolute和relative的。學習

咱們在init函數中分別將absolute和relative的div的內容顯示兩個div分別的top和left測試

最外層div距離瀏覽器上邊框10px，裏面第一個（紅色）div高度爲30，在absolute和relative中能夠看出top的值是同樣的，那麼是否是就說明不管是absolute仍是relative在這個時候都未脫離文檔流，由於他們被上面第一個div擠下來了，接下來分別將absolute和relative兩個div設置 top=100px,那麼結果以下：網站

由上圖能夠看出，設置了top以後，absolute這個元素的top值是100px，而relative的top值倒是144px，說明absolute這個元素是脫離了文檔流以body爲父元素的，而relative中的144=100+44，說明relative是之外層div爲父容器，而且未脫離文檔流，在上一個（紅色）div的基礎上向下平移了100px，由此證實了以上論斷。ui

position屬性值還有fixed，和默認值static，以及top，left的用法還有不少注意事項，之後慢慢再說。spa

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。