Why does opacity make an element appear above another, if an element without is appears below?

Question

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

Answer 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.

Answer 2

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