css定位總結

position:static;//position的默認值，表示元素按照標準文檔流定位，設置left，top，right，bottom，z-index無效。

position:relative;//按照標準文檔流相對定位，不設置left，top，right，bottom，z-index時，位置和static時同樣，設置left，top，right，bottom，z-index時會相對於它在static時的位置定位。其餘的元素的位置則不會受該元素的影響發生位置改變來彌補它偏離後剩下的空隙。也就是說其它元素的位置和它是static時同樣。代碼以下：

<style>
#div2{
    background: gold;
    height: 150px;
    margin-left: 20px;
    width: 200px;
}
#div3{
    position: relative;
    left: 20px;
    top: 20px;
    width: 100px;
    background: saddlebrown;
    height: 100px;
}
#div4{
    width: 100px;
    height: 80px;
    background: darkblue;
 }
</style>
<div id="div2">
     <div id="div3"></div>
     <div id="div4"></div>
</div>

效果圖：

div3是relative定位，位置偏移了，但div4的位置仍然和div3爲偏移時同樣。

position: absolute;脫離文檔流的絕對定位。脫離文檔流意味着文檔流裏的元素會當它不存在同樣定位。absolute是相對於它的第一個定位不是static的祖先元素定位。若是絕對定位（position屬性的值爲absolute）的元素沒有「positioned」祖先元素，那麼它是相對於文檔的 body 元素，而且它會隨着頁面滾動而移動。代碼以下：

<style>
        #div2{
            background: gold;
            height: 150px;
            margin-left: 20px;
            width: 200px;
            position: relative;
        }
        #div3{
            position: absolute;
            right: 20px;
            bottom: 20px;
            width: 100px;
            background: saddlebrown;
            height: 100px;
        }
        #div4{
            width: 100px;
            height: 80px;
            background: darkblue;
        }
    </style>
<div id="div2">
    div2
    <div id="div3">div3</div>
    <div id="div4">div4</div>
</div>

效果圖：

position:fixed;脫離文檔流的固定定位，元素會相對於視窗來定位，這意味着即使頁面滾動，它仍是會停留在相同的位置。和 relative 同樣， top 、 right 、 bottom 和 left 屬性均可用。

position:sticky'粘性定位。是一個新的css3屬性。

它的表現相似position:relative和position:fixed的合體，在目標區域在屏幕中可見時，它的行爲就像position:relative; 而當頁面滾動超出目標區域時，它的表現就像position:fixed，它會固定在目標位置。（這是網上的大多數說法，但不徹底對，這隻適用於sticky定位元素是body的子元素時的狀況。若是sticky定位元素的父元素，狀況就會不同。具體的請看下面的代碼分析）

但總的來講元素定位表現爲在跨越特定閾值前爲相對定位，以後爲固定定位，只是固定定位相對的對象比較複雜不必定是瀏覽器窗口。
而且 top 和 bottom 同時設置時，top 生效的優先級高，left 和 right 同時設置時，left 的優先級高

如下是我通過測試後的結果：
position:sticky生效條件：
一、設置了top或bottom，left或right
二、父元素要所有可見，這裏的可見是指父元素自己不能被父元素的父級元素的overflow:hidden給蓋住，使父元素的最小高度不能所有可見。
三、父元素自己不能設置overflow:hidden。
四、若是父元素的overflow的值爲auto、scroll等使得父元素的內容不溢出的屬性時，sticky定位的元素的定位是相對於它的父元素的而不是瀏覽器窗口。若是父元素的內容容許溢出且溢出內容超出瀏覽器窗口，sticky定位的元素的定位是相對於瀏覽器窗口的。
下面是測試代碼：

<style type="text/css">
        body{
            margin: 0;
            padding: 0;
        }
        #bottom{
            width: 100%;
            height: 70px;
            line-height: 70px;
            text-align: center;
            background: lightblue;
            position: sticky;
            margin: 0;
            bottom: 0px;
        }
        #top{
            width: 100%;
            height: 70px;
            line-height: 70px;
            text-align: center;
            background: lightblue;
            position: sticky;
            margin: 0;
            top: 0px;
        }
        #div0{
            width: 100%;
            height: 200px;
        }
        #div1{
            height: 400px;//分別調整height:800px，調整overflow的值爲auto，visible等值能夠看到效果
            overflow: auto;
        }
    </style>
    <div id="div0">
        <div id="div1">
        <h2 id="top">頂部</h2>
        <ul>
            <li>內容</li><li>內容</li><li>內容</li>
            <li>內容</li><li>內容</li><li>內容</li>
            <li>內容</li><li>內容</li><li>內容</li>
            <li>內容</li><li>內容</li><li>內容</li>
            <li>內容</li><li>內容</li><li>內容</li>
            <li>內容</li><li>內容</li><li>內容</li>
            <li>內容</li><li>內容</li><li>內容</li>
            <li>內容</li><li>內容</li><li>內容</li>
            <li>內容</li><li>內容</li><li>內容</li>
            <li>內容</li><li>內容</li><li>內容</li>
            <li>內容</li><li>內容</li><li>內容</li>
            <li>內容</li><li>內容</li>
        </ul>
        <div id="bottom">底部</div>
        </div>
    </div>