理解CSS相對定位和固定定位 - xiaohuochai－IT工程師數位筆記本

文章出處

前面的話

　　一般地，說起定位元素是指position不為static的元素，包括relative、absolute和fixed。前面已經詳細介紹過absolute絕對定位的基礎和應用，這篇博客介紹和梳理相對定位relative和固定定位fixed的相關知識

相對定位

定義

　　可能理解起來最簡單的定位機制就是相對定位了。采用這種機制時，通過使用偏移屬性移動定位元素。當元素相對定位時，它會從其正常位置移走，不過，原來所占的空間并不會因此消失。相對定位元素，會為其所有子元素建立一個新的包含塊。這個包含塊對應于該元素原本所在的位置

　　[注意]如果相對定位元素遇到過度受限的問題，一個值會重置為另一個值的相反數。bottom總是等于-top，right總是等于-left

百分比

　　非常奇怪的是，雖然相對定位的數值型偏移屬性是相對于自身的，但其百分比卻是相對于包含塊的。top和bottom百分比相對于包含塊的高度(只是高度height，不包括縱向padding和border)，left和right百分比相對于包含塊的寬度(只是寬度width，不包括橫向padding和border)

　　[注意]對于IE7-和firefox瀏覽器來說，若包含塊的高度height為auto，則百分比的top和bottom設置有效果，而其他瀏覽器則都沒有效果

特性

【1】限制范圍

　　一般地，給絕對定位元素限制范圍時，為其父級元素設置相對定位relative，因為相對定位元素不脫離文檔流

　　[注意]相對定位元素可以限制絕對定位，但不能限制固定定位，因為固定定位是相對于視窗定位的

【2】提升層級

　　當想要提升元素層級，又不想脫離文檔流時，使用相對定位是一個好主意

行內元素

　　不同于絕對定位元素可以使元素具有塊級元素屬性，相對定位應用于inline元素后，由于無法改變其行內元素的屬性，不具備塊級元素屬性，無法設置寬高，其上下margin也依然存在問題

IE兼容

　　在IE6瀏覽器下，haslayout下的元素負margin超出父元素的部分會被隱藏掉。這個問題可以通過設置margin負值元素的position屬性值為relative來解決。

固定定位

　　固定定位與絕對定位很類似，元素會完全從文檔流中去除，但固定元素的偏移是相對于視窗。

　　[注意]IE6-瀏覽器不支持

特性

　　固定定位與絕對定位的很多特性都類似，具有包裹性、破壞性及去浮動的特性，關于各瀏覽器中display屬性的bug、clip屬性的隱藏功能、靜態位置跳動以及overflow失效的表現都相同，在此就不再贅述。

全屏遮罩

　　當頁面內容超出頁面容器大小出現滾動條時，此時使用absolute全屏遮罩會出現滾動條以外部分沒有遮住的情況。因為根元素html的父級是document，document的高度和可視區域一致，也就是與視窗一致，是不包括滾動條以外部分的。

　　這時，只能使用fixed固定定位來實現全屏遮罩效果

.page{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: pink;
    z-index: -1;
}    
.test{
    width: 2000px;
    height: 200px;
    background-color: lightblue;
}

<div class="page" id="page"></div>
<div class="test"></div>    
<button>absolute</button>
<button>fixed</button>

var btns = document.getElementsByTagName('button');
for(var i = 0; i < btns.length; i++){
    btns[i].onclick = function(){
        page.style.position = this.innerHTML;
    }
}

//分別點擊兩個按鈕，并拖動橫向滾動條查看效果

文章列表