What I am trying to achieve is a 3 layer effect. The first layer should be fully visible. The second layer should black but 50% transparent, showing through to the first layer's content. The third layer should be on top of the transparent layer, but fully visible (no transparency).
When I try this, the 3rd layer always inherits the opacity of the second layer (also 50% transparent) and for some reason is always behind the 2nd layer and can't be interacted with in the browser (even though it has a higher z-index), regardless of what I do. I have never been able to put anything fully visible or intractable over a transparent element.