Kevin Powell - Community•4mo ago

How to create stacking order where 2 different elements can legitimately be on top of each other?

The images show what I'm building and trying to fix. 1. Normal layout with a tooltip which correctly overlaps the 'Home' dropdown control. 2. Having clicked on the dropdown control, all the buttons that have a tooltip are still shown higher. In this situation the dropdown should be on top. I've read articles on stacking context, and seen 2 of KP's videos. But I'm still unsure if what I want is even possible, let alone how.

8 Replies

Rägnar O'ock•4mo ago

Looks like you raised the z-index of the whole button+tooltip assembly when what you want it just for the tooltip itself to be on top So try to change the element you apply z-index to A cool trick to avoid having to deal with z-index when doing tooltips (assuming you're using js for the tooltip 'cause Anchor isn't there yet) is to put the tooltip element at the bottom of the DOM, that way it will be drawn on top of everything else by default (unless you set some z-index on other elements)

ἔρως•4mo ago

that trick works great, actually the only downside is that you have to put it at the bottom in a <dialog> instead of the body, when it is open

jgclarkOP•4mo ago

Thanks for your help and support; it is appreciated. I guess you're saying that what I'm after is possible, which is good news. At the moment the only use of z-index is on the tooltip:hover classes:

.tooltip:hover::before,
.tooltip:hover::after {
    display: block;
    z-index: 20;
}

.tooltip:hover::before,
.tooltip:hover::after {
    display: block;
    z-index: 20;
}

and the dropdown options container:

/* The dropdown menu, that contains the options. */
.dropdown-select-dropdiv {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    border: 1px solid var(--divider-color);
    border-radius: 4px;
    z-index: 25;
    width: 100%;
    padding-right: 6px; 
}

/* The dropdown menu, that contains the options. */
.dropdown-select-dropdiv {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    border: 1px solid var(--divider-color);
    border-radius: 4px;
    z-index: 25;
    width: 100%;
    padding-right: 6px; 
}

And, yes, the tooltip is applied with some JS, and it lives in a <div id="tooltip-portal">...</div> at the bottom of the HTML. (And devtools shows it last in the tree, which I assume means at the bottom of the DOM.) I have tried removing the z-index: 20 on the tooltip, but nothing changes.

ἔρως•4mo ago

the content of the dropdown should be under the tooltip-portal or use a true <select> for that both should be shown at the top

jgclarkOP•4mo ago

Ah. The select was written by a colleague, and isn't a true <select>, though it starts with an <input>. both what? The 'tooltip-portal' and 'dropdown-select' contents?

ἔρως•4mo ago

the part of the select that shows, it's supposed to always be on top

jgclarkOP•4mo ago

I'm not following what you're suggesting, sorry. I agree the dropdown-select always wants to be at the top, which is why I'm asking the question. @Rägnar I'm trying to understand how I've "raised the z-index of the whole button+tooltip assembly" when there's only a z-index on the hover, and there's nothing else that starts a stacking context, according to the MDN docs.

ἔρως•4mo ago

im not suggesting anything

Gaming

Programming

How to create stacking order where 2 different elements can legitimately be on top of each other?

Did you find this page helpful?