在CSS中,元素的定位是非常重要的,它可以讓我們很方便地布局網頁。以下是一些常用的定位方式:
position:static; position:relative; position:absolute; position:fixed;
position:static是默認值,它表示元素在正常文檔流中的位置。我們不需要顯式地聲明這個值。
position:relative表示相對定位。在這種情況下,我們可以使用top、bottom、left、right屬性來移動元素的位置。比如:
div { position: relative; top: 20px; left: 30px; }
這個div會向下移動20px,向右移動30px。 注意,相對定位不會使元素脫離文檔流。
position:absolute表示絕對定位。我們可以用top、bottom、left、right屬性來確定元素的位置。例如:
div { position: absolute; left: 50px; top: 100px; }
這個div將在文檔流中脫離,它的位置由相對于最近的定位祖先元素或body元素指定的值來決定。
position:fixed表示固定定位。元素位于瀏覽器窗口之上,不會隨頁面的滾動而移動。在這種情況下,我們可以使用top、bottom、left、right屬性來定位元素。例如:
div { position: fixed; top: 0; left: 0; }
這個div將固定在瀏覽器窗口的左上角。