關於CSS盒子模型之定位的具體分析

css盒子模型之定位

1、Static 定位

HTML元素的預設值，即沒有定位，元素出現在正常的流中。
靜態定位的元素不會受到top, bottom, left, right影響。

2、Fixed 定位

元素的位置相對於瀏覽器視窗是固定位置。
即使視窗是滾動的它也不會移動：

Fixed定位使元素的位置與文檔流無關，因此不佔據空間。
Fixed定位的元素和其他元素重疊。

3、Relative 定位

相對定位元素的定位是相對其正常位置。

可以移動的相對定位元素的內容和相互重疊的元素，它原本所佔的空間不會改變。

相對定位元素經常被用來作為絕對位置元素的容器塊。

4、Absolute 定位

絕對位置的元素的位置相對於最近的已定位父元素，如果元素沒有已定位的父元素，那麼它的位置相對於:

Absolutely定位使元素的位置與文檔流無關，因此不佔據空間。
Absolutely定位的元素和其他元素重疊。

重疊的元素
元素的定位與文檔流無關，所以它們可以覆蓋頁面上的其它元素
z-index屬性指定了一個元素的堆疊順序（哪個元素應該放在前面，或後面）
一個元素可以有正數或負數的堆疊順序：
具有更高堆疊順序的元素總是在較低的堆疊順序元素的前面。
注意： 如果兩個定位元素重疊，沒有指定z - index，最後定位在HTML代碼中的元素將被顯示在最前面。

相對與絕對位置的區別

絕對位置（absolute）：
1、將被賦予此定位方法的對象從文檔流中拖出，使用left，right，top， bottom等屬性相對於其最接近的一個最有定位設定的父級對象進行絕對位置，如果對象的父級沒有設定定位屬性，即還是遵循HTML定位規則的，則依據 body 對象左上方作為參考進行定位。
2、絕對位置對象可層疊，層疊順序可通過 z-index 屬性控制，z-index值為無單位的整數，大的在最上面，可以有負值。
相對於最近的非標準流定位，原來的位置消失，被後邊的位置所頂替

相對定位（relative）：
相對於原來的位置，但是原來的位置仍然保留。
對象不可層疊，依據left，right，top，bottom等屬性在正常文檔流中位移自身位置。
同樣可以用z-index分層設計。

[教程] 徹底弄懂CSS盒子模式四(絕對位置和相對定位)

樣本：

<meta charset="UTF-8" /><title></title><style type="text/css">/*多個標籤同時設定，使用逗號分隔*/        body, p, ul, li, img, a {            margin: 0;            padding: 0;        }        /*給定圖片尺寸：否則會超出父容器，堆疊在一起*/        img {            width: 100%;            height: 100%        }        /*讓a標籤絕對於li標籤，li要設定relative*/        li {            list-style: none;            position: relative;            float: left;            padding: 1%;            width: 18%;        }        /*讓刪除紅叉處於li的右上方，且需給定大小*/        a {            background: url(images/close.png);            width: 16px;            height: 16px;            position: absolute;            top: 0;            right: 0;        }</style>

：