Search code examples
javascriptjqueryhtmlcssz-index

Have two full width HTML elements overlap but both be interactive

I have a design that requires sections to be full width of the page, but the content is within a container (article). With that in mind, there is a need for an aside that floats above the full-with sections that needs to be interactive (aside).

Both article and side have content that needs to be interacted with. The issue then is one has to have a priority over the other and at the moment, I've settled for the article, but it's not ideal.

https://jsfiddle.net/WolfieZero/aouu1v40/3/

Any ideas? I wanted to see if it could be fixed with CSS first but thinking this might be a job for JS (jQuery in this case).

Thanks.

Solution

  • You just need to switch the z-indexes, now the links in both areas will be clickable.

    .module {
    z-index: 2;
}
section > div {
    z-index: 1;
}

    Before, you were prioritising the "section", so that even though the "module" appeared to be on top (due to its positioning properties), its z-index meant it wasn't actually accessible.

    See https://jsfiddle.net/aouu1v40/6/ for a demo