HTML

    <div class="container">
      <div class="box1">
      </div>
      <button>parent-button</button>
    </div>

CSS

      .container {
        width: 400px;
        height: 400px;
        background-color: burlywood;
        position: relative;
        z-index:0;
      }
      .box1 {
        width: 400px;
        height: 400px;
        position: absolute;
        top: 0;
        z-index:-1;
        background-color: rgba(0, 0, 0,0.5);
      }
.container button:hover{
    background-color:red;
}

副上code pen 問題一的效果
https://codepen.io/byssjbij-the-encoder/pen/ZERPNpN
實際上我是想利用子層設置background-color:RGBA 達到遮罩的效果
只是我不清楚為什麼是這樣設
問題1想問為什麼z-index這樣有遮罩效果且button有效果(可以按或添加hover)

.container{
z-index:0
}
.box1{ 
z-index:-1 
}

**問題2.**設成這樣"有遮罩效果"但是button卻被遮照蓋住了完全不能使用button

.container{
z-index:1
}
.box1{ 
z-index:2 
}

**問題3.**為什麼將CSS設成底下這樣button有出現在"遮罩之上"
但是卻失效了(沒辦法按或hover)?

.container{
z-index:-1;
}

.box1{
z-index:-1;
}