How to hide content that is scrolled under a transparent div?

Question

You have two divs, one over the other, and the one on top is transparent. However, when you scroll you want the div on the bottom to hide as it goes under the first transpar

Answer 1

This cannot be done without JavaScript. For the content to not show through a transparent layer, it must not be rendered at all — you would need to use overflow:hidden. The problem is that the edge of the content cannot be fixed if the content scrolls with the page. An element can be positioned relative to the viewport or relative to the page, but not both at the same time.