---
# System prepended metadata

title: DAY11 - z-index 使元素重疊，搭配定位語法
tags: ['Re:0 前端工程師之路 - HTML CSS 篇章 / 排版-position 篇']

---

# 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:


![](https://i.imgur.com/fIRnX4e.png)


- z-index 的參數，表示這個元素在 relative 這個父層區間內
  他的權重等級有多少，越高的，會浮現在畫面上的層數越高。
  
  
- 例如 box-3 為 5
  綠色盒子在重疊的情況下，為最上方。  
  
  
[筆記參考](https://codepen.io/rrpaqjcq/pen/GRBNwmr)


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