Partials, Z-Index, and Overlay

[tmeuze]

Hi all,

I'm trying to customize the navigation tabs such that a description will appear below a tab item when hovering over it. The ideal solution is that a div added to the tabs-items.html partial would appear above all other site content (such as md-main). I've tried using z-index to display the div above other content, but no matter what I do - the main content always displays above the div.

What happens:

Ideal Appearance

In other words, it seems that the content I am trying to overlay above the entire site, is constrained by the partial it resides in.

I would love to better understand how the layout of different partials work, if they don't respect Z-Index. It seems that something similar to this can be accomplished, as it has been done with the version switcher:

Can anyone explain how the partial layout works with regard to this? Is what I am trying to accomplish possible, and if so, does someone have an example?

Any insight is greatly appreciated.

[squidfunk]

You need to remove contain: content on .md-tabs__list, e.g. by overriding it with:

.md-tabs__list {
  contain: initial;
}

Note, however, that this is there for a reason. Containment is a way to signal to the browser that the content of this element is independent of other areas of the document tree. This improves rendering performance when scrolling (when the tabs are hidden). Removing it shouldn't be too big a deal, but it definitely helps when it's there.

[tmeuze]

That worked perfectly. Thanks, Martin, as always!