淺談CSS中position定位問題

在CSS中，有一個非常重要的屬性，幾乎只要用CSS，就避免不了使用這個屬性，它就是定位屬性position。它可以使元素非常靈活的處於你想的位置。

position屬性的值有absolute、relative、fixed、static以及inherit.其中前三個值是我們開發中比較常用的，static爲默認值，也就是沒有定位，inherit是規定從父元素繼承 position 屬性的值，也很少使用，反正我在開發中沒有用過static以及inherit這兩個值，接下來，我們就重點了解下前三個值。

相對定位relative

生成相對定位的元素，相對於其正常位置進行定位。通過top、left、right以及bottom設置元素位置，例子如下：

div{
    position:relative;
    top:50px;
    left:50px;
}

上面代碼的意思就是，向div的頂部位置和左側位置分別增加50像素，通俗點講，也就是將div向下向右分別移動50像素。需要注意的是，相對定位是不會脫離文本流的，也就是說他不會在文本中刪除。

相對定位最常見的使用方式有如下兩種：一、元素相對自身的原位置偏移某個距離。二、使該元素的子元素相對該元素絕對定位。

絕對定位absolute

生成絕對定位的元素，相對於父級元素進行定位。也是通過top、left、right以及bottom設置元素位置，例子如下：

.parent{
    position:relative;
}

.child{
    position:absolute;
    right:20px
}

上面代碼意思就是：class名爲child的子元素相對class名爲parent的父元素的右側移動20像素。父級元素添加position：relative，相當於告訴子元素：“要以你爹的位置位移”。注意，絕對定位是脫離文本流的，也就是說他會在文本中刪除，不佔文本位置。

固定定位fixed

固定定位相對於瀏覽器視窗定位，定位後不隨文檔滾動而移動。元素定位後生成一個塊級框，不論它原來是行內元素還是塊級元素。與絕對定位的區別僅僅是包含塊不同。與絕對定位一樣，固定定位元素也是脫離文本流的。通過top、left、right以及bottom設置元素位置，用法同相對定位與絕對定位。我們在瀏覽網站時有時會看到兩側出現廣告，還有頂部導航欄始終都在頁面頂部，這兩種效果就是通過固定定位實現的。