Sprites-Layering

Hello,

I’m totally new here and want to learn some WebGL/OpenGL ES2.0 stuff.
I want to make a very simple scrollable 2D Game for myself… just Quad-Sprites, but layered.

The bottom layer should be water. It’s just a repeating static water-Sprite at the moment.
Above the water I want to render some Beach-Sprites (with semi-transparency areas towards the ocean). These Sprites build an island shape.
So far so good - thats what I have at the moment.

My next Layer should contain flat pebble-stones, grass and other textures for varity - but these Sprites should only render over the fully opaque pixels of the underlaying Beach-Sprites, not over the semi-transparent parts.
And thats my problem. Whats the best/performant way to accomplish this? What do I need? Special fragment shaders, Depth-Tests, Rendertextures or other tricks? Any hints?