当链接位于`后面时如何使链接可点击<div> `

Question

How to make the gradient appear on top of the pictures and the links are clickable at the same time?

The gradient needs to be sticky while scrolling. Is it possible to do that? Currently, the scroll bar isn't working as well..

 .container{ position: relative; } .image-dog { width:200px; height:100px; } a:hover{ cursor:pointer; } .directory { display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; justify-content: space-between; white-space: nowrap; scroll-behavior: smooth; } .gradient { width: 100%; height: 100%; left: 0; top: 0; right: 0; background-image: linear-gradient(to right, red 1%, rgba(255, 255, 255, 0) 4%, rgba(255, 255, 255, 0) 85%, blue 100%); position: absolute; z-index: 100; }

 <div class="container"> <div class="directory"> <div class="gradient"> </div> <div class="owner"> <a class="image-dog" href="https:///www.google.com"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg" alt="A black, brown, and white dog wearing a kerchief"></a> <a href="https:///www.google.com"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg" alt="A black, brown, and white dog wearing a kerchief"></a> <a href="https:///www.google.com"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg" alt="A black, brown, and white dog wearing a kerchief"></a> <a href="https:///www.google.com"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg" alt="A black, brown, and white dog wearing a kerchief"></a> </div> </div> </div>

Answer 1

<style> 
.container{
  position: relative;
  top: -20px;
}
.image-dog {
  width:200px;
  height:100px;
}
a:hover{
  cursor:pointer;
}

.directory {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  justify-content: space-between;
  white-space: nowrap;
  scroll-behavior: smooth;
}

.gradient {
    width: 100%;
    height: 20px;
    left: 0;
    top: 0;
    right: 0;
    background-image: linear-gradient(to right, red 1%, rgba(255, 255, 255, 0) 4%, rgba(255, 255, 255, 0) 85%, blue 100%);
    position: sticky;
    z-index: 999;
}

</style>

 <div class="gradient">
            </div>
        <div class="container">
                <div class="directory">

                  <div class="owner">
                      <a class="image-dog" href="https:///www.google.com"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg" alt="A black, brown, and white dog wearing a kerchief"></a>
                      <a href="https:///www.google.com"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg" alt="A black, brown, and white dog wearing a kerchief"></a>
                      <a href="https:///www.google.com"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg" alt="A black, brown, and white dog wearing a kerchief"></a>
                      <a href="https:///www.google.com"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg" alt="A black, brown, and white dog wearing a kerchief"></a>
                  </div>

                </div>
              </div>

Answer 2

Just apply pointer-events: none; to your gradient to make it 'click-through':

 .container { position: relative; } .image-dog { width: 200px; height: 100px; } a:hover { cursor: pointer; } .directory { display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; justify-content: space-between; white-space: nowrap; scroll-behavior: smooth; } .gradient { width: 100%; height: 100%; left: 0; top: 0; right: 0; background-image: linear-gradient(to right, red 1%, rgba(255, 255, 255, 0) 4%, rgba(255, 255, 255, 0) 85%, blue 100%); position: absolute; z-index: 100; pointer-events: none; }

 <div class="container"> <div class="directory"> <div class="gradient"> </div> <div class="owner"> <a class="image-dog" href="https:///www.google.com"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg" alt="A black, brown, and white dog wearing a kerchief"></a> <a href="https:///www.google.com"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg" alt="A black, brown, and white dog wearing a kerchief"></a> <a href="https:///www.google.com"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg" alt="A black, brown, and white dog wearing a kerchief"></a> <a href="https:///www.google.com"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg" alt="A black, brown, and white dog wearing a kerchief"></a> </div> </div> </div>