a not clickable in a div-CodePudding

I have this code

.dark-bg {
                width: 30%;
                height: 100vh;
                background: linear-gradient(90deg, rgb(58, 10, 123) 15%, rgb(67, 28, 158) 90%);
                float: left;
                z-index: 100;
              }
            .wave {
                position: absolute;
                content: "";
                bottom: 0;
                width: 30.06%;
                height: 100vh;
                transform: rotate(180deg);
                background: url(https://i.imgur.com/Ds3Raj2.png);
                background-size: contain;
                background-repeat: no-repeat;
        
            }

            <a href='/hgt'>test</a>
            <div } >
                <a href='/hgt'>test2</a>
            </div>
 <div } >
                <a href='/hgt'>test 3</a>
            </div>

Codepen link : https://codepen.io/bagou4502/pen/dyZYJpQ

And i can t click on test 2. I try to add a z index but not work.

CodePudding user response：

Try by adding pointer-events:none to the wave and this will prevent user to click on the div :

.dark-bg {
                width: 30%;
                height: 100vh;
                background: linear-gradient(90deg, rgb(58, 10, 123) 15%, rgb(67, 28, 158) 90%);
                float: left;
                z-index: 100;
              }
            .wave {
                position: absolute;
                content: "";
                bottom: 0;
                width: 30.06%;
                height: 100vh;
                transform: rotate(180deg);
                background: url(https://i.imgur.com/Ds3Raj2.png);
                background-size: contain;
                background-repeat: no-repeat;
                pointer-events:none;
            }

<a href='/hgt'>test</a>
            <div } >
                <a href='/hgt'>test2</a>
            </div>
 <div } >
                <a href='/hgt'>test 3</a>
            </div>

CodePudding user response：

.dark-bg {
                width: 30%;
                height: 100vh;
                background: linear-gradient(90deg, rgb(58, 10, 123) 15%, rgb(67, 28, 158) 90%);
                float: left;
                z-index: 100;
              }
            .wave {
                position: absolute;
                content: "";
                bottom: 0;
                width: 30.06%;
                height: 100vh;
                transform: rotate(180deg);
                background: url(https://i.imgur.com/Ds3Raj2.png);
                background-size: contain;
                background-repeat: no-repeat;
                z-index: 100;
            }
a {
  position: relative;
  z-index: 1000;
}

<a href='/hgt'>test</a>
            <div  >
                <a href='/hgt'>test2</a>
            </div>
 <div  >
                <a href='/hgt'>test 3</a>
            </div>

One solution is to z-index the anchor tag.