CSS Position屬性：更好的定位元素

一、理解Position屬性

CSS的Position屬性，是一種控制元素位置的方式，在網頁開發中非常常用，它指定元素在頁面上的位置。它是一個非常重要的屬性，掌握它的工作原理，可以更好的控制網頁布局。

當應用Position屬性時，我們可以使用如下的幾個值：

• Static：元素默認值，元素出現在正常的流中，這個時候Top、Left、Right、Bottom和Z-index屬性都不會生效。
• Relative：元素會相對於它的正常位置進行定位，可以使用Top、Left、Right、Bottom屬性進行定位，此時元素不脫離文檔流。
• Absolute：元素會相對於它的父元素進行定位，可以使用Top、Left、Right、Bottom屬性進行定位，此時元素會脫離文檔流。如果沒有找到絕對定位的祖先元素，則相對於文檔的body進行定位。
• Fixed：與Absolute類似，唯一的區別在於元素會固定在視口的某個位置，而不是相對於某個父元素定位。
• Sticky：元素在其父元素內滾動時表現為相對定位，在滾動到達特定位置時表現為固定定位，可以使用Top、Left、Right、Bottom屬性進行定位。

二、使用Position屬性

1. Static

元素默認值Static，我們一般不會去改變它的位置。

  
    .box {
      position: static;
    }
  

2. Relative

相對位置可以根據具體情況來進行變化。在下例中，元素相對於原來的位置向右3em和向下2em。

  
    .box {
      position: relative;
      top: 2em;
      left: 3em;
    }
  

3. Absolute

絕對定位可以使元素完全脫離文檔流，相對於最近的祖先元素進行定位。下面的例子中，box2會相對於父元素的左上角定位，top值為30px，left值為20px。如果沒有找到父元素則相對於body元素進行定位。

  
    .parent {
      position: relative;
      width: 200px;
      height: 200px;
    }
    .box2 {
      position: absolute;
      top: 30px;
      left: 20px;
    }
  

4. Fixed

固定定位使元素固定在屏幕上，不會滾動。下面的例子中，box3會固定在屏幕的右下角。

  
    .box3 {
      position: fixed;
      bottom: 0;
      right: 0;
    }
  

三、Position屬性的應用場景

1. 絕對定位菜單

當網站有一個固定的導航菜單時，絕對定位是一個不錯的選擇。下面的例子中，nav元素使用了絕對定位，定位在容器的頂部。

  
    .container {
      position: relative;
    }
    nav {
      position: absolute;
      top: 0;
      left: 0;
      height: 60px;
      width: 100%;
    }
  

2. 懸浮元素

使用懸浮元素可以通過絕對定位來表現。下面的例子中，懸浮元素使用了絕對定位。

  
    .box:hover {
      position: absolute;
      top: -20px;
      left: -20px;
      z-index: 10;
      background-color: #ccc;
      color: #333;
    }
  

3. 固定底部欄

當一個網站需要有固定的底部欄時，固定定位是一個很好的選擇。下面的例子中，footer元素使用了固定定位，固定在屏幕底部。

  
    footer {
      position: fixed;
      bottom: 0;
      width: 100%;
      height: 80px;
      background-color: #333;
      color: #fff;
      text-align: center;
      line-height: 80px;
    }
  

四、Position屬性的注意事項

1. z-index的問題

z-index屬性可以控制元素的層疊順序，z-index越大的元素會覆蓋z-index越小的元素。需要注意的是，只有定位元素才能使用z-index屬性。

2. IE6的問題

IE6的Position屬性存在問題，absolute和relative屬性必須設置left和top值才能正確工作。不能正確支持固定定位fixed，而且fixed屬性在IE6中只能相對於body元素定位，不能相對於其他元素定位。

3. 可訪問性問題

Position屬性可能會影響網站的可訪問性。例如，使用絕對定位將導致元素從文檔流中刪除，並且屏幕閱讀器不會讀取它的內容。

結語

掌握Position屬性可以讓我們更好地布局和定位元素。需要注意，Position要在合適的時候使用，過度使用可能會影響網站的可訪問性。