2

I have an absolutely positioned flyout table, that is hidden (display:none;) by default,
and appears (display:block;) on hovering over its heading.
It appears above everything else on the page, which is what I want.

The exception are elements with an opacity value below 1.
They appear above the hover table.

Why is that, and how could I avoid it?

JSFiddle

screenshot

Watchduck
  • 1,076
  • 1
  • 9
  • 29
  • This is really strange... at first I thought it might have been JSFiddle acting up, but it behaves the same with a html file. I was able to fix it with a `z-index: 1` on the `table.hidden`. But I still don't know why that is happening. CSS is weird XD. – Rico Hancock Feb 10 '23 at 16:17
  • I also found this confusing. My current interpretation is, that the above/below relationship between table and spans is undefined, because they all have `z-index: auto;`. It kind of makes sense: If we leave something undefined, we have to expect something random. – Watchduck Feb 10 '23 at 16:21

2 Answers2

1

This is working "as it should", but to get your desired result, use z-index: 1 on your position: absolute element.

I did some more digging into this because I was curious as to why it was happening. There are two important things:

  1. elements with position: absolute and a z-index: auto stay in the same stacking context.
  2. an element with an opacity less than 1 creates a new stacking context.

I found this answer helpful as it goes into more depth about why this happens.

Rico Hancock
  • 366
  • 6
0

You can easily avoid it by adding z-index: 1; to table.hidden

Clément
  • 70
  • 5