CSS help for z-index

Can anyone know how I might target the z-index for either the Modal or the RSS Architect stack? The latter has an index of 99999 and the former, with the z-index checked, has a z-index of 30000. I’ve tried a few combos but I generally just take wild stabs when it comes to CSS

Sample page here: https://www.jbostick.ca/test/zindex/

Can you adjust the z-index setting in RSS Architect? Why is it set so high?

On your actual page are you trying to have it float over something else? Can you set RSS Architect z-index to “auto”?

No there’s no z-index setting I could find, though I’ll look again when I’m back home

I think you should put in a request to the developer to not go so mad with the z-index values and allow the user to alter it.

I can see that the Architect stack is also being set to 999999999. I did have a play with some of these high values but I’m not familiar enough with what these stacks do to know what I’m looking at.

If you want a best in class lightweight Modal then Limelight would be the best solution.

OK - here’s the technical explanation:

The focus stack has its modal located inside the divs that make the button, this is necessary for the morph effect but it has an unwanted side effect as follows:

z-index is relative to the closest parent that is position relative or static - this is known as the stacking context. Giving an element an enormous z-index when it is inside something with a z-index of 1 will do nothing to bring it to the front of other elements on the page - it is just a layer position relative to other elements that are also inside the z-index: 1 container.

I agree the z-index on the RSSArchitect is ridiculously high but never the less, even if it was much lower, the focus stack would be in behind of it for the reasons mentioned above - i.e. its z-index is meaningless and appears first in the DOM therefore is behind.

The focus stack has a z-index of 300000 on its modal which is utterly pointless as the modal is inside a stacks div with an implicit z-index of auto (i.e. not specified). It will therefore only be in front of itself. You can see a question about it on the original source page of the code (unanswered). Without moving the modal to the body, it is an intractable limitation.

You can fix your demo page with one line of CSS but be aware that if this goes onto a proper page with a fixed menu or other such elements, the focus button could end up in front of them.

z-index wars always end badly and should be avoided.

.com_elixir_stacks_focus_stack{
    z-index: 9999999
}
2 Likes

As it turns out, the client doesn’t want the fancy effect that Focus has and we’re going back to a regular menu anyway. Appreciate the help though everyone (and the explanation @tav)

Off topic but…

Your test page alerted me to the fact that Tool have a new album coming out. My absolute favourite band during my formative years. I had no idea. 13 years I have been waiting for this!! :)

Lol, glad I could help

1 Like