條件

1. 內元素絕對定位（所有）
2. 外元素相對定位
3. 目標元素指定index

※z-index的數值代表優先度。
數字大，表示優先顯示的強度越強（排在前面）
數字小，表示優先顯示的強度越低（隱藏在後面）←反向操作：設負數讓元素被蓋住

範例

沒有設index的情況下，HTML下面的元素會蓋掉上面的元素

.box1
.box2

body
 position: relative //外元素相對定位

.box1,.box2
 width: 200px
 height: 200px
 border: 1px solid #eee
 
.box1
 background-color: #73c6a8
 position: absolute //內元素絕對定位
 
.box2
 background-color: #73c0c6
 position: absolute //內元素絕對定位

 margin-top: 50px
 margin-left: 50px

Display

 

 

 

 

 

 

綠色方塊的HTML在上面，藍色方塊的HTML在下面。
所以藍色方塊優先顯示，蓋掉綠色方塊

設定z-index，優先顯示目標元素

.box1
.box2

body
 position: relative //外元素相對定位

.box1,.box2
 width: 200px
 height: 200px
 border: 1px solid #eee
 
.box1
 background-color: #73c6a8
 position: absolute //內元素絕對定位
 z-index: 1
 
.box2
 background-color: #73c0c6
 position: absolute //內元素絕對定位

 margin-top: 50px
 margin-left: 50px

Display

 

 

 

 

 

 
設定index為1，優先顯示綠色方塊