CODEWITHSUNDEEP
htmlcssz-index
user5824608
user5824608

Reputation: 45

How to allow clicking on <a> with z-index of -1

I'm trying to allow a user to click on a link that has a z-index of -1. I want the rest of the content of the page to go over the link when scrolling down, which works perfectly, but I can't click on the link.

HTML:

<html>
  <body>
    <div id = "aWrap">
    <a href = "#foo">I should be able to click this</a>
    </div>
    <div id = "foo">
      <p>Rest of page content</p>
    </div>
  </body>
</html>

CSS:

body {
  margin: 0;
  padding: 0;
}

#aWrap {
  height: 100vh;
}

a {
  display: block;
  z-index: -1;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#foo {
  background-color: black;
  color: white;
  padding: 40vh;
  text-align: center;
}

Here's my pen: http://codepen.io/anon/pen/XKNRXx?editors=1100

Upvotes: 4

Views: 2763

Answers (2)

ghost_dad
ghost_dad

Reputation: 1306

Here's an updated codepen working as you're expecting:

http://codepen.io/thecox/pen/xORdEe?editors=1100

When you use a z-index of -1, the element is placed below all elements, including its parent element. Updating to z-index: 0 and position: relative / z-index: 1 on the overlapping container corrects this. Only elements which are positioned work with the z-index property.

Upvotes: 4

Mukesh Ram
Mukesh Ram

Reputation: 6328

Add z-index:0 to a tag and add relative position to next div with z-index:1 like this:

  a {
      display: block;
      z-index: 0;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    #foo {
      background-color: black;
      color: white;
      padding: 40vh;
      text-align: center;
      position:relative;
      z-index:1
    }

Upvotes: 1

Related Questions