CSS定位屬性是CSS中非常重要的一部分,不同的定位屬性可以實現不同的布局效果。下面我們來看一下常見的CSS定位對應的屬性:
定位屬性:position:static; 對應屬性:無 定位屬性:position:relative; 對應屬性:top, right, bottom, left 定位屬性:position:absolute; 對應屬性:top, right, bottom, left 定位屬性:position:fixed; 對應屬性:top, right, bottom, left
其中,position:static;
是CSS默認值,元素不會被特殊定位,不受top,right,bottom,left屬性影響。而position:relative;
表示相對定位,元素在文檔流中的位置不會改變,但是可以通過top、right、bottom、left屬性進行微調。
position:absolute;
是絕對定位,元素根據最近的已定位祖先元素的位置來進行定位,如果沒有已定位的祖先元素,那么就以body元素為參考點進行定位,可以通過top、right、bottom、left屬性進行定位。position:fixed;
也是絕對定位,只不過以瀏覽器窗口為參考點進行定位,也可以通過top、right、bottom、left屬性進行微調。
總而言之,不同的CSS定位屬性有不同的作用,選擇合適的定位屬性可以幫助我們實現更好的頁面布局效果。