CSS3中的position屬性是很常用的,它可以用來控制元素在網頁中的布局方式。使用position屬性時,我們需要注意幾點。以下是詳解。
1. position屬性有四個可選值:static、relative、absolute和fixed。
例: // static是默認屬性 div{ position: static; }
2. 當使用非static的position屬性時,需要配合使用top、bottom、left、right屬性來控制元素的位置。
例: div{ position: relative; top: 10px; // 相對于原來的位置上移10px left: 20px; // 相對于原來的位置左移20px }
3. 當使用絕對定位(absolute)時,元素的位置是相對于其最近的已定位的祖先元素確定的,如果沒有已定位的祖先元素,則相對于body元素。
例: div{ position: absolute; top: 50px; left: 50px; }
4. 當使用固定定位(fixed)時,元素的位置是相對于瀏覽器窗口本身確定的,并且不隨頁面滾動而改變。
例: div{ position: fixed; top: 0px; right: 0px; }
5. 在使用position屬性時,也可以配合使用z-index屬性來控制疊放順序。
例: div{ position: absolute; top: 10px; left: 10px; z-index: 2; }
總之,position屬性是很實用的一個屬性,但是在使用時需要注意,特別是在使用絕對定位(absolute)和固定定位(fixed)時,要注意決定其相對位置的祖先元素的位置,并且要注意控制z-index屬性以避免位置疊亂的問題。