z-index doesn't work with positioned fixed floating button

Question

I have floating button set to position fixed with a z-index of 9999.

When I scrolls the page, some elements see through the button.

So I have set the element to position as relative with a z-index of 10, still sees through.

When I set to -1, it works, but then the element becomes unclickable.

How can I make this work?

#button {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
}

#carousel {
  position: relative;
  z-index: 1;
}

I've already done the research and saw this post, z-index not working with fixed positioning, but with so solutions to my issue.

And "some elements see through the button" is a bit vague. – Mr Lister Apr 18 '19 at 06:13 — Mr Lister, Apr 18 '19 at 06:13

score 0 · Accepted Answer · answered Apr 18 '19 at 02:08

Without the HTML and the rest of the code, it would be impossible to help.
From the code you posted, it should work.

It might be a problem from the Parents' Stacking Context.

If you have something like:

<div id="parent-1" style="z-index: 1">
    <div id="myDiv" style="z-index: 9999"></div>
</div>
<div id="parent-2" style="z-index: 2"></div>

The [#myDiv] one will always be under the [#parent-2].
Because of the [#parent-1] stacking context (layer) is under the [#parent-2] stacking context (layer).

Another common issue is with using 'transform' on the Parent element, which opens up another bag of hurt.

z-index doesn't work with positioned fixed floating button

1 Answers1