MicroTut：CSS 定位的工作原理

毫無疑問，位置 屬性是設計師在他們的 CSS 工具箱中擁有的最有用的工具之一。但是，有一些關於定位的概念可能會讓初學者感到困惑。

首先，什麼是定位？

當您的瀏覽器打開網頁時，它會按照元素（div、段落、標題等）在頁面的 HTML 標記中出現的順序開始渲染元素。定位是一種組織元素顯示方式的自然方式，也是一種輕鬆解決重疊等情況的方法。定位有四種類型：靜態 , 相對 , 絕對 和固定 .

元素默認是靜態定位的

默認定位，隱式應用於頁面上的每個元素，是 static .靜態定位意味著每個元素都按照它添加到頁面的自然順序進行定位。塊狀元素顯示在其他塊狀元素下方，內聯元素顯示在其他內聯元素旁邊。

相對定位

將定位設置為相對本身不會對元素在頁面上的顯示方式產生任何明顯的差異。但是您現在可以使用 top 將其從正常位置移動 , 左 , 底部 對 CSS 屬性。這在處理需要偏移元素但不將其錨定到頁面上指定位置的情況時非常方便。

.relativeDiv{

    /*
        Moving the div to the top-left
        from where it would normally show:
     */

    position:relative;
    top:-50px;
    left:-100px;
}

固定定位

添加位置：固定 到元素的 CSS 聲明，將其相對於瀏覽器窗口定位。這允許您顯示工具欄、按鈕或導航菜單，它們錨定在固定位置並隨頁面滾動。

.fixedDiv{

    /*
        Fixing the div 20 px from the bottom
        of the browser window:
     */

    position:fixed;
    right:20px;
    bottom:20px;
}

可能唯一的缺點是這種定位在 IE6 等舊瀏覽器中不受支持，如果您無法承受放棄對這些支持的奢侈。

絕對定位

相對於文檔，一個絕對定位的元素顯示在頁面上 , 或 定位不同於靜態的父元素 .這樣，使用 top , 左 , 底部 對 CSS 屬性，可以指定準確的位置。這也使您能夠將 div 水平和垂直居中，我們在“將 div 水平和垂直居中”中討論過 微圖。

.parentDiv{

    /* Absolute and Fixed positioning would work as well: */

    position:relative;
}
.absoluteDiv{

    /*
        Displaying the div 50px from the right and 90px from
        the top of its parent because of the explicit positioning
     */

    position:absolute;
    right:50px;
    top:90px;
}

好處

使用這些定位屬性，您可以實現各種高級頁面佈局，這將使您的設計更上一層樓。結合 z-index 屬性，您可以更改適用於元素的默認覆蓋規則（代碼中稍後出現的元素顯示在前面的元素上方）。

您對定位屬性做過的最酷的設計是什麼？在下面的評論部分吹噓。