Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Links not working with position absolute

I have a div with a absolute position and a div with relative position. The first div contains the links and the second div contains some contents which is over the first div. The first div has a z-index of 1, while the second has a z-index of -1 and the first div is also declared first.

Although, the links in the first div are unclickable. I have now idea, why this is so.

Fiddle

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

Second fiddle

like image 951
Tyilo Avatar asked Sep 12 '11 00:09

Tyilo


People also ask

What can I use instead of position absolute?

We can use CSS absolute positioning to overlap elements, but there's some advantages to using CSS grid instead. Let's explore using CSS grid as an alternative to position absolute.

Does margin auto work with position absolute?

New! Save questions or answers and organize your favorite content. Learn more.

How do I change the position of a link in HTML?

Complete HTML/CSS Course 2022 To change the target of a link in HTML, use the target attribute of the <a>… </a> tag. The target attribute can be used to open any link in a new tab, or the same tab, etc.

Can I use position absolute in email?

For Outlook we can actually use regular CSS absolute positioning, which may surprise you to have this more advanced CSS support in Outlook. However there is a catch. Outlook does support absolute positioning but only when done inside VML. So here inside conditional comments <!


1 Answers

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

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

like image 87
Joe Avatar answered Oct 07 '22 09:10

Joe