2

I have an html that looks like this

.links {
  overflow: none;
  position: absolute;
}

.links section {
  width: max-content;
  height: 20px;
  background-color: red;
}

.links section a {
  pointer-events: none;
  z-index: 500;
  color: white;
}

.container {
  height: 100%;
  width: 100%;
  padding: 5em;
  background-color: blue;
}
<div class="container">
  <div class="canvas-wrapper">
    <div class="links">
      <section>
        <a href="www.google.com">Click me and get redirected</a>
      </section>
    </div>
  </div>
  <div class="text-layer"></div>
</div>

https://jsfiddle.net/ccastro95/61x5k4zt/14/

I would like to be able to click the a tag. It is imperative to keep .links as absolute position.

I tried using pointer-events:none but it didn't work. Also the order of the elements is very important and should be kept like it is.

Nick Vu
  • 14,512
  • 4
  • 21
  • 31
César Castro Aroche
  • 595
  • 1
  • 9
  • 20
  • Does this answer your question? [Click through div to underlying elements](https://stackoverflow.com/questions/3680429/click-through-div-to-underlying-elements) – Libra Apr 28 '22 at 15:24
  • Removing `pointer-events: none;` should make your link clickable – Nick Vu Apr 28 '22 at 15:25
  • Could you describe the reason behind making the anchor element have pointer-events: none? Is there something else going on which we can't see? – A Haworth Apr 28 '22 at 15:28
  • just move the .links dom so its above the other content, i.e move it down after .text-layer part – Lawrence Cherone Apr 28 '22 at 15:28

1 Answers1

0

just remove pointer-events: none; from a tag !

.links {
  overflow: none;
  position: absolute;
}

.links section {
  width: max-content;
  height: 20px;
  background-color: red;
}

.links section a {
  z-index: 500;
  color: white;
}

.container {
  height: 100%;
  width: 100%;
  padding: 5em;
  background-color: blue;
}
<div class="container">
  <div class="canvas-wrapper">
    <div class="links">
      <section>
        <a href="www.google.com">Click me and get redirected</a>
      </section>
    </div>
  </div>
  <div class="text-layer"></div>
</div>
Gopal Lohar
  • 133
  • 5