CSS position 、 z-index 筆記│鼠年全馬鐵人挑戰 #13

CSS 必學的排版技巧 - 相對定位、絕對定位、z-index

position

使用時機: 當元素與元素需要做位置調整就可以使用 position 來做。

• MDN position 資料

Photo by Matthew Henry on Unsplash

絕對定位 absolute 、相對定位 relative

絕對定位會看 div 父元素的定位點來做設定

假設父層不寫 position: relative; ，那它就會以瀏覽器當座標。

如果想要讓 box2 在 box1 區塊當中的範圍做絕對定位，那麼父元素的 box1 就要設定 position: relative; 相對定位。box2 要設定 position: absolute; 絕對定位，

假設要讓 box2 出現在 box1 的右上方 :

position

HTML

<div class="box1">
    <div class="box2"></div>
</div>

CSS

.box1{
    width: 300px;
    height: 500px;
    background-color: blue;
    position: relative; /*在父元素設定相對定位*/
}
.box2{
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
    right: 0;
    top: 0;
}

其中方位是可以設定負值的，例如: right: -20px;、bottom: -20px;

• MDN top 資料
• MDN bottom 資料
• MDN left 資料
• MDN right 資料

進階設定

z-index

z-index 的 “z” 是來自於 z 軸，我們都知道網頁有 x 軸、 y 軸，但是還有一個 z 軸，這是一個空間的概念。z 軸在哪裡? z 軸就是我們與電腦螢幕面對面的方向。

z-index

• MDN z-index 資料

使用時機: 假使 2 個元素重疊，想讓下方的元素移到上層就可以用這個語法。

z-index: 10; 會比 z-index: 9; 還上方，也就是數字設越大就越上層。z-index 的值越大，代表離我們越靠近；z-index 的值越小，代表離我們較遠。

如果 2 個 div 設的 z-index 數值都一樣，那麼後方的 div 會覆蓋過前方的 div

HTML

<div class="box1">
   <div class="box2"></div>
</div>

CSS

.box1{
    width: 300px;
    height: 300px;
    background-color: blue;
    position: relative; 
}
.box2{
    width: 300px;
    height: 300px;
    background-color: red;
    position: absolute;
    right: 0;
    top: 0;
}

因為權重相同，所以排在 box1 後面的 box2 就會完全覆蓋住 box1，所以只能看到紅色 box2。

position

BUT! 剛剛有提到 z-index 的數值設越大就能移到上層

HTML

<div class="wrap">
  <div class="box1"></div>
  <div class="box2"></div>
</div>

CSS

.wrap{
  width: 300px;
  height: 300px;
  position: relative;
  border: 2px solid black;
}
.box1,.box2{
  width: 100px;
  height: 100px;
  position: absolute;
  bottom: 0;
}
.box1{
  background-color: blue;
  right: -70px;
  z-index: 1; /* 數值比 box2 大，所以圖移到上層*/
}
.box2{
  background-color: red;
  right: -30px;
  z-index: 0; /* 數值比 box1 小，所以圖移到下層*/
}

z-index