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