user5824608 user5824608 - 5 months ago 7
CSS Question

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

Answer

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.

Comments