Z-Index Voids Clickable Links

[Mr.XXIV]

So basically, no matter if I use <a> or <div> (with an onClick), z-index stops it from being clickable. I really don't understand the cause of this. Can anyone help me figure this out?

[Dick Montage]

Probably helps to post your code...

[Mr.XXIV]

<div onClick="location.href='#'" id="ad-bg">

#ad-bg {
width: 100%;
height: 100%;
background: #000 url(http://cdn.lolsomuch.com/img/cod-bg.jpg) no-repeat right top;
background-size: contain;
cursor: pointer;
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
z-index: -1;
}

[Kami-]

A z-index of -1, will be rendered behind the BODY of your website (assuming your BODY element is using the default z-index of 0); this is why you're thinking you cannot click on the element.

[primexx]

when asking for web help, post ALL the code (or, more preferably, a sample page).

make sure, like Kami said, that you don't have anything covering up the links.

[Mr.XXIV]

Alright, but, does anyone happen to contain any knowledge on the code of the solution? I can't really wrap this around my head.

[Dick Montage]

Code of what? We need to know what you're doing - so full code please.

But on what has been seen: z-index -1 is BEHIND everything else so it's not click-able because something is obscuring it.

[articuno1au]

Unless you absolutely need it; Remove the Z-Index.

[lnmnky]

That's kind of like saying that you buried something, and now you can't get to it...

Dig it up again.

[StevenJ]

remove the z-index setting?

or embed another div with a higher z index that has the link..

[phate]

<div onClick="location.href='#'" id="ad-bg">

#ad-bg {

width: 100%;

height: 100%;

background: #000 url(http://cdn.lolsomuch.com/img/cod-bg.jpg) no-repeat right top;

background-size: contain;

cursor: pointer;

position: fixed;

top: ;

right: ;

left: ;

bottom: ;

margin: auto;

}

fixed

[StevenJ]

it's worth explaining that just as you have the y and x axis controlling vertical and horizontal position, the z axis adds the third dimension allowing you to control layers through z-index

[Mr.XXIV]

<div onClick="location.href='#'" id="ad-bg">

#ad-bg {

width: 100%;

height: 100%;

background: #000 url(http://cdn.lolsomuch.../img/cod-bg.jpg) no-repeat right top;

background-size: contain;

cursor: pointer;

position: fixed;

top: ;

right: ;

left: ;

bottom: ;

margin: auto;

}

fixed

Go to Complex.com, if you notice the ads behind the content. That's what I'm trying to accomplish.

[phate]

Can you link your website?

[Mr.XXIV]

Sorry i caused you guys trouble. Here's the site http://lolsomuch.com. Go to one of the single posts & you'll notice the clickable background. That's what I'm trying to do, but I realized that i had to create a container for the page to be over 2 points at least and keep the clickable -1 so everything still overlaps the body.