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

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