Html CSS學習（五）position定位

Html CSS學習（五）position定位

position用來對元素進行定位，其值有如下幾種：

• static：無特殊定位，對象遵循正常文檔流，top，right，bottom，left等屬性不會被應用。
• relative：對象遵循正常文檔流，但將依據top，right，bottom，left等屬性在正常文檔流中偏移位置。
• absolute：對象脫離正常文檔流，使用top，right，bottom，left等屬性進行絕對定位。而其層疊經過z-index屬性定義。
• fixe：對象脫離正常文檔流，使用top，right，botton，left等屬性以窗口爲參考點進行定位，當出現滾動條時，對象不會隨着滾動。

1、static定位

頁面代碼以下：

<div class="father">
        <div class="children">
            子容器1
        </div>
        <div class="children">
            子容器2
        </div>
    </div>

CSS代碼以下：

<style>
        .father{
            width: 200px;
            height: 300px;
            border: 1px solid red;
        }
        .children{
            margin: 10px;
            width: 150px;
            height: 100px;
            border: 1px solid blue;
        }
    </style>

頁面效果以下：

從上面頁面的結果能夠看出，Html文檔流默認的定位便是static，元素按照其默認的規則進行定位。

2、relative定位

下面，首先修改第一個子容器，將其position更改成relative,並設置其top，left屬性。

CSS樣式設置以下：

.father div:first-child{
            position: relative;
            top: 30px;
            left: 30px;
        }

頁面效果以下：

從上圖能夠看出，relative，仍然遵循正常的文檔流，因此它的位置依然保留，可是它會依照top，left，bottom，right等屬性，相對於其原來的位置進行偏移。

3、absolute定位

若是將子容器1的定位更改成absolute，則頁面效果以下：

從中能夠看出，它再也不遵循正常的文檔流，其原始位置被佔據。它是絕對定位，它以瀏覽器的左上角爲參照點進行定位。而relative是相對定位，它是相對於其自身的原始位置進行定位，也就是說，它以沒有使用relative定位時的位置左上角爲參照點進行定位。

4、fixed

對象將脫離正常的文檔流，它能瀏覽器窗口左上角爲參考點進行定位，而且若是頁面出現滾動條時，它並不會隨滾動條的移動而滾動，它始終以瀏覽器窗口左上角爲參考點進行定位，與其父容器無關。經常使用於製做固定導航條等內容。