關於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>

效果圖：

#

以上是關於CSS盒子模型之定位的具體分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！