# DAY11 - z-index 使元素重疊，搭配定位語法

- 建立環境 - container，內有三個 box:

<div class="container">
  <div class="box box-1"></div>
  <div class="box box-2"></div>
  <div class="box box-3"></div>
</div>

.container {
  position: relative;
  margin: 0 auto;
  width: 500px;
  height: 500px;
  border: 3px solid #000;
}

.box {
  position: absolute;
  width: 100px;
  height: 100px;
}

.box-1 {
  top: 10px;
  left: 30px;
  z-index: 3;
  background: red;
}

.box-2 {
  top: 0px;
  z-index: 4;
  background: blue;
}

.box-3 {
  top: 39px;
  left: 15px;
  z-index: 5;
  background: green;
}

### z-index:


- z-index 的參數，表示這個元素在 relative 這個父層區間內
他的權重等級有多少，越高的，會浮現在畫面上的層數越高。

- 例如 box-3 為 5
綠色盒子在重疊的情況下，為最上方。

[筆記參考](https://codepen.io/rrpaqjcq/pen/GRBNwmr)

###### tags: `Re:0 前端工程師之路 - HTML CSS 篇章 / 排版-position 篇`