CSS易混淆知識點總結與分享－定位與布局 - zuowj－IT工程師數位筆記本

文章出處

CSS定位有四種模式：static、relative、absolute、fixed，其它static是默認值，下面分別講解下各自的特點；

static：靜態定位，處于動態布局流中，按照頁面中的各元素先后順序、父子關系自動排列與布局，每個靜態定位元素均占用動態布局的一塊空間；

relative：相對定位，處于動態布局流中，如果設置了偏移量（LEFT或TOP的值），則會有相應的位置調整，位置調整的標準是基于上一個處于動態布局流中的元素（即：設為static及relative元素）；

absolute：絕對定位，不在動態布局流中，動態布局流中會忽略該元素的存在（即不計算該類元素的占用空間，且默認處于未設置Z-INDEX的普通元素的上層），如果設置了偏移量（LEFT或TOP的值），則會有相應的位置調整，位置調整的標準是基于非靜態定位的父元素（或者說是非靜態定位包裹的元素），如果沒有符合條件的父元素，則以BODY為標準；如果沒有設置偏移量，則直接將元素當前的位置做位默認的偏移量，另外，絕對定位具有包裹性，即塊級元素被絕對定位后，除非顯示式設置元素的寬度與高度，否則元素的默認寬度與高度是以元素的內容來自動適應的；

fixed：固定定位，不在動態布局流中，動態布局流中會忽略該元素的存在（即不計算該類元素的占用空間，且默認處于未設置Z-INDEX的普通元素的上層），如果設置了偏移量（LEFT或TOP的值），則會有相應的位置調整，位置調整的標準是基于瀏覽器窗口的（可以理解為BODY），如果沒有設置偏移量，則直接將元素當前的位置做位默認的偏移量，另外，固定定位具有包裹性，即塊級元素被固定定位后，除非顯示式設置元素的寬度與高度，否則元素的默認寬度與高度是以元素的內容來自動適應的；還有若設置或默認的的位偏移量大于瀏覽器窗口范圍則不會顯示；

以下是上面四種定位方法的演示代碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
    <title>CSS Study</title>
    <style type="text/css">
        html, body {
            margin:0px;
            padding:0px;
            height:100%;
        }
        #div0{
            position:static;
            background-color:gray;
            height:200px;
        }
        #div1 {
            position:relative;
            background-color:green;
            height:200px;
        }
        #div2 {
            position: absolute;
            height: 50px;
            background-color: red;
            top: 20px;
            left: 50px;
            z-index: 9999;
        }
        #div3{
            position:fixed;
            background-color:yellow;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            alertpostion("div2");
            alertpostion("div3");
        }

        function alertpostion(divid)
        {
            var odiv = document.getElementById(divid);
            var top = odiv.offsetTop;
            var left = odiv.offsetLeft;
            alert("top:" + top +",left:" + left);
        }
    </script>
</head>
<body>
    <div id="div0">
        div0 content  position:static;
    </div>
    <div id="div1">
        div1 content position:relative;
        <div id="div2">
            div2 content position: absolute;
        </div>
    </div>
    <div id="div3">
        div3 content position:fixed;
    </div>
</body>
</html>

最終顯示的效果如下圖示：

理解了CSS各種定位的原理及其作用，我們可以通過CSS定位來實現常見的頁面布局

第一種：左右布局，左邊固定大小，右邊寬度自適應，代碼如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>CSS Study</title>
    <style type="text/css">
        html, body {
            margin: 0px;
            padding: 0px;
            height: 100%;
        }
        #warper{
            margin:0px;
            padding:0px;
            height:100%;
            background-color:skyblue;
        }

        #sidebar{
            position:absolute;
            top:0px;
            width:200px;
            height:100%;
            background-color:green;
        }
        #content{
            position:relative;
            left:200px;
            height:100%;
            background-color:orange;
        }



    </style>

</head>
<body>
    <div id="warper">
        <div id="content">
                content contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
                contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
        </div>
        <div id="sidebar">
                sidebar
        </div>
    </div>
</body>
</html>

實現效果如下圖示：

大家看了代碼后，可能有疑惑，為何要將content放在左邊，而不是右邊，原因在于：content需要保持自適應的寬度，即：100%，那么它就必需占據整行空間，只有采用相對定位，然后將左邊的偏移量設為需要空出的位置，即：200PX;這樣就實現了非左邊的200PX位，其余的都是content的區域；sidebar這里就必需設置為絕對定位，因為它在不采用浮動的情況下是無法進行位置設置的，將它的左邊偏移量設為0PX，寬度設為200PX；這樣就會定位到左邊content空出的區域，從而實現整個頁面的左右布局。

第二種：左右布局，左邊寬度自適應，右邊固定，代碼如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>CSS Study</title>
    <style type="text/css">
        html, body {
            margin: 0px;
            padding: 0px;
            height: 100%;
        }
        #warper{
            margin:0px;
            padding:0px;
            height:100%;
            background-color:skyblue;
        }

        #content {
            float:left;
            height: 100%;
            width:100%;
            margin-right:-200px;
            background-color: orange;
        }

        #content-inner{
            height:100%;
            margin-right:200px;
            background-color:red;
            overflow:auto;
        }

         #sidebar {
            float: left;
            top: 0px;
            width: 200px;
            height: 100%;
            background-color: green;
        }

    </style>

</head>
<body>
    <div id="warper">
        <div id="content">
            <div id="content-inner">
                content 
            </div>
        </div>
        <div id="sidebar">
                sidebar
        </div>
    </div>
</body>
</html>

實現效果如下圖示：

實現原理說明：先將content元素向左浮動，由于浮動也具有包裹性，所以必需顯示設置寬度為100%，但右邊需要放置側邊欄，所以將外邊距設為－200PX，使得允許后續元素（即：sidebar）可以進入content元素的右邊200PX的空間，再將sidebar元素也設為向左浮動，寬度設為200PX,這樣它就能定位在content元素的右邊，由于content元素的右邊被sidebar元素占用了200PX，所以在content元素再加上一個content-inner元素，并將其右外邊距設為200PX，形成右邊200PX被空出，這樣就能避免被sidebar元素遮蓋，從而形成網頁整體的左右布局。

第三種：左中右布局，左右為固定寬度，中間寬度自適應，代碼如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
        html,body{
            height:100%;
            margin:0px;
            padding:0px;
        }
        #warper {
            position:relative;
            height:100%;
        }

        #left {
            position: absolute;
            top: 0px;
            left: 0px;
            height: 100%;
            width: 200px;
            background-color: red;
        }

        #right {
            position: absolute;
            top:0px;
            right: 0px;
            width: 200px;
            height: 100%;
            background-color: green;
        }

        #content{
            margin:0px 200px 0px 200px;
            height:100%;
            background-color:orange;
        }
    </style>
</head>
<body>
    <div id="warper">
        <div id="left">
            left
        </div>
        <div id="content">
            content
        </div>
        <div id="right">
            right
        </div>
    </div>
</body>
</html>

實現效果如下圖示：

實現原理說明：首先將warper元素設為相對定位，以確保被包裹的三個DIV元素在進行定位時是統一基于warper元素，然后將left元素與right元素分別設為固定定位及寬度均為200PX（寬度可依實際情況設置），并將left元素的位偏移設為LEFT=0,TOP=0（當然也可以不用顯示設置，因為默認就是這樣的），將right元素的位偏移量設為RIGHT=0使其靠右邊固定，TOP=0使其與warper元素頂部平行，最后只需將content元素的左右兩邊外邊距設為:200PX;使其左右兩邊各讓出200PX空間，最終形成左中右布局；

第四種布局：上中下布局，上面與下面固定高度及固定位置，中間自適應高度，代碼如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        html, body {
            margin: 0px;
            padding: 0px;
            height: 100%;
        }
        #warper {
            position:relative;
            margin: 0px;
            padding: 0px;
            height: 100%;
        }

        #header{
            position:fixed;
            top:0px;
            height:50px;
            width:100%;
            background-color:yellowgreen;
        }

        #footer {
            position: fixed;
            height: 50px;
            bottom:0px;
            width: 100%;
            background-color:aqua;
        }

        #content{
            margin:50px 0px 50px 0px;
            background-color:red;
        }

    </style>
</head>
<body>
    <div id="warper">
        <div id="header">header</div>
        <div id="content">content <br />
            content <br />content <br />content <br />content <br />content <br />content <br />
            content <br />content <br />content <br />content <br />content <br />content <br />
            content <br />content <br />content <br />content <br />content <br />content <br />
            content <br />content <br />content <br />content <br />content <br />content <br />
            content <br />content <br />content <br />content <br />content <br />content <br />
            content <br />content <br />content <br />content <br />content <br />content <br />
            content <br />content <br />content <br />content <br />content <br />content <br />
            content <br />content <br />content <br />content <br />content <br />content <br />
            content <br />content <br />content <br />content <br />content <br />content <br />

            content <br />content <br />content <br />content <br />content <br />content <br />
            content <br />content <br />content <br />content <br />content <br />content <br />
            content <br />content <br />content <br />content <br />content <br />content <br />
            end
        </div>
        <div id="footer">footer</div>
    </div>
</body>
</html>

實現效果如下圖示：

實現原理說明：首先將header元素與footer元素分別設為固定定位，并指定高度及寬度（此處高度均設為50，寬度設為100%[注意包裹性]，可依實際情況設置），由于固定定位的位置調整是依據瀏覽器窗口的，所以只需將header元素TOP屬性設為0，它就會始終在瀏覽器頂部，將footer元素BOTTOM屬性設為0，它就始終在瀏覽器底部，最后將content元素的上下外邊距設為50PX即可，這樣就形成了上中下布局，當然中間content元素的高度并不是占據剩余空間，而是自適應內容的，如果設定固定高度多余的內容是無法顯示的，所以這里應該考慮實際情況；

好了就總結到這里了，其實實現布局的方法有很多，我這里只是列舉一些常用的比較簡單的方法，關鍵是大家要知道CSS定位的原理，這樣就能靈活應變了，不足之處，還請大家指出，謝謝！

文章列表