3

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

Improve this question
2
  • 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. Commented Feb 10, 2023 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. Commented Feb 10, 2023 at 16:21

2 Answers 2

Reset to default
2

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

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

Improve this answer

3 Comments

i believe this is a hack based on opacity
css has weird stuff
I actually don't know why it happens. I would be interesting to know !

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.