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
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.
New! Save questions or answers and organize your favorite content. Learn more.
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.
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 <!
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).
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With