34891


お世話になります。

[![画像の説明をここに入力](https://i.stack.imgur.com/RIUxy.png)](https://i.stack.imgur.com/RIUxy.png)

[code]

    .parent{
        position: relative;
        z-index: -2;
    }
    
[/code]

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

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

[code]

       @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;
    }
[/code]

[code]

     <!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>
[/code]


CC BY-SA 3.0
2017-05-20T23:54:51.830
34878
2017-05-21T08:42:02.717
2017-05-21T08:19:52.753
12297
12297
question
html css
z-index: -1;とした要素の子要素の:hoverが反応しなくなる。


body の z-index は未設定の auto で 0 なので header の -2 より前面になります。  
その為 hover や其の他もろもろは動作しません。

[code]

    body {
      position: relative;
      z-index: -10;
    }
    
[/code]

とやって body を無理やり後ろにするか、parent に正の値を与えてください。

[code]

       @charset "UTF-8";
    body {
      position: relative;
      z-index: -10;
    }
    
    *{
      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;
    }
[/code]

[code]

     <!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>
[/code]


CC BY-SA 3.0
2017-05-21T08:42:02.717
34891
2017-05-21T08:42:02.717
15705
34878
answer