お世話になります。

画像の説明をここに入力

.parent{
    position: relative;
    z-index: -2;
}

とした要素の子要素の:hoverが反応するようにしたいのですが、どうすればよいでしょうか？
添付画像のように.parentの右下、左下の部分にposition:absoluteでimg画像を配置した時にimg画像がボタンの手前に来てしまうのを変えるために、
headerをz-index: -2;、imgをz-index: -1;としています。

また、どういう現象が起きているのかも知りたいです。

   @charset "UTF-8";

*{
  text-align: center;
  color:white;
}




header{
background: tomato;
padding: 10px;
position: relative;
height: 300px;
z-index: -2;/*ここを書くとボタンが反応しなくなる*/
}


header img[src="right.jpg"]{
position: absolute;
width: 30%;
height: auto;
bottom:0;
right: 0;
z-index: -1;
}

header img[src="left.jpg"]{
position: absolute;
width: 30%;
height: auto;
bottom:0;
left: 0;
z-index: -1;
}

p{
transition: 0.5s;
}

p.button{
line-height: 1.5;
width: 35%;
margin: 20px auto;
border-radius: 100px;
border: white 2px solid;
font-size: 2vw;
padding: 5px 30px;
}

p.button:hover{
background: hsla(150, 100%, 50%, 0.5);
cursor: pointer;
}

a{
text-decoration: none;
display: block;
}
 <!DOCTYPE html>
<html>
  <head>
<meta charset="utf-8">
<title>TEST</title>
<link rel="stylesheet" href="styles.css">
</head>
<header>
<img src="left.jpg" alt="">
<img src="right.jpg" alt="">
<a href="#"><p class="button">ボタン</p></a>
<a href="#"><p class="button">ボタン</p></a>
<a href="#"><p class="button">ボタン</p></a>
<a href="#"><p class="button">ボタン</p></a>
<a href="#"><p class="button">ボタン</p></a>
</header>
<body>
</body>
</html>