Links do not work with absolute position

Question

I have a div with an absolute position and a div with a relative position. The first div contains links, and the second div contains some content that is located above the first div . The first div has a z-index 1, and the second has a z-index of -1 and the first div also declared first.

Despite the fact that the links in the first div are unattractive. I have an idea why this is so.

Fiddle

Both side1 and side2 will have a background image. And the content should appear around, but the links should still work.

Second fiddle

Answer 1

Either change .side to z-index: 1 , or change #container to margin-top: 150px instead of padding-top .

#books has a z-index of 1, but inside the container with z-index of -1, so it still ends below #container , which has z-index: -1 , but gets rendered after (thus at the top).

Answer 2

Your code has

  z-index: -1; position: absolute; 

I think this is the reason. Changing -1 to 1 corrects it. Not sure if I missed something, if so, explain in the comments and / or update the question.

Answer 3

links are not connected because the div tag exceeds it.

This tag:

  <div class="side side2"></div> 

give the .side2 element a lower z-index to hide it.

Answer 4

Your first div and your second div both share the .side class, which is defined using z-index: -1 . Thus, both are on the same stack level, and the one that comes last in the markup will be on top of the previous one. All you have to do is give .side1 z-index greater than -1. A.