CSS 定位

position 屬性定義元素在頁面上的定位方式。

CSS 定位方法

在網頁上適當地定位元素是良好佈局設計的必要條件。CSS 中有幾種方法可用於定位元素。以下部分將逐一介紹這些定位方法。

靜態定位

靜態定位元素始終根據頁面的正常流定位。預設情況下，HTML 元素定位為靜態。靜態定位的元素不影響由 top ，bottom， left ，right 和 z-index 特性影響。

.box {
    padding: 20px;
    background: #7dc765;
}

相對定位

相對定位的元件相對於其正常位置定位。

在相對定位方案中，元素的框位置根據正常流計算。然後，將盒從該正常位置，根據所述屬性移位- top 或 bottom 和/或 left 或 right 。

.box {
    position: relative;
    left: 100px;
}

注意： 相對定位的元素可以移動並與其他元素重疊，但它會保留最初為正常流保留的空間。

絕對定位

絕對定位的元素相對於具有靜態位置的第一父元素定位。如果找不到這樣的元素，它將被定位在相對於瀏覽器視窗的“左上角”的頁面上。框的偏移進一步可使用的屬性的一個或多個指定，比如 top ， right ， bottom 和 left 。

絕對定位的元素完全從正常流中取出，因此在放置同級元素時不佔用空間。但是，它可以根據 z-index 屬性值重疊其他元素。此外，絕對定位的元素可以具有邊距，並且它們不會與任何其他邊距一起摺疊。

.box {
    position: absolute;
    top: 200px;
    left: 100px;
}

固定定位

固定定位是絕對定位的子類別。

唯一的區別是，固定定位元素相對於瀏覽器的 viewport 是固定的，拖動時不會移動。

.box {
    position: fixed;
    top: 200px;
    left: 100px;
}

注意： 對於列印介質型別，固定定位元素在每個頁面上呈現，並相對於頁面框固定（即使在列印預覽中）。僅當指定了 <!DOCTYPE> 時，IE7 和 IE8 才支援固定值。