user5824608 user5824608 - 4 months ago 5x
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.


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


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:


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

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.