CSS-position定位：absolute＆relative＆fixed

使用時機

當畫面中的元素需要重疊時，建議可以使用position屬性作定位

預設值(static)

• 在不設定position屬性的情況，瀏覽器的預設值為static

  .box{
      position:static;
      }

• 該元素「不會被特別定位」在頁面上特定位置，而是照著瀏覽器預設的配置自動排版在頁面上

  相對定位(relative)

• css語法
  • position的值為relative
  • 若’ 沒有 ‘設置其他top、right、bottom、left屬性，則其顯現的位置跟static一樣，會依照瀏覽器預設的配置自動排版在頁面上
  • 若’ 有 ‘設置top、right、bottom、left屬性 ，該元素會「相對地」調整其原本該出現的所在位置

    .box{
        position:relative;
    }

絕對定位(absolute)

• css語法

  • position的值為absolute

  • top、bottom、left、right交互搭配使用，數值可以為負值或百分比

    .box{
        position:absolute;
        top:0;
        bottom:0;
        left:0;
        right:0;
    }

    

• ==若其外層容器沒有「可以被定位的元素(static以外的元素)」，那麼這個子元素的定位就是相對於該網頁（也就是 元素），作上、下、左、右位置的絕對定位（即使外層有包一個父元素，例：container）==

  

• ==Q: 如何以父元素作為定位空間?==

  ==A: 定義父元素的position==

  .container{
      position:relative;
  }

  ==內層absolute的子元素則會被外層父元素受限，並在父元素的空間作絕對定位==

  

固定定位(fixed)

• css語法

  • position的值為fixed
  • 使用 top、right、bottom、left屬性來定位，可以為負值。

    .inner{
        position:fixed;
        right: 0px;
        bottom: -100px;
    }

• 該元素會相對於瀏覽器視窗來定位，即便瀏覽頁面捲動，它還是會固定在相同的位置。
  

補充：上下疊層(z-index)

• 在未設置z-index屬性的情況之下，疊層會按照程式碼由上而下畫圖，box1畫完才畫box2，所以box2疊在box1之上
  
• 若想要自定義疊層前後，則透過z-index屬性，==「數字越大=越後畫=疊在越上層 」==