Handle overlapping objects

Currently, I manage to render a single “image” (i.e. all vertices have a z=0 coordinates) in OpenGL. However, I am wondering how to add new “images” (still with different vertices and texture) which can overlap (in the same plane z=0) the others as illustrated in this image:

For something like overlapping textured rectangles, you can simply render them from back to front (start with the one at the back, then draw the one in front of it and so on). The later one simply drawn over the earlier ones.

If you can’t do that for some reason, you can use depth buffer testing for opaque rectangles. For that however, you have to render them at different Z distances.
For each fragment, a depth value is stored in a depth buffer and new fragments are only written if they pass a configurable test (like having a smaller distance).

For transparent rectangles like the one in your picture, you have to draw them back to front to get the blending right. You can still combine this with depth buffering
by first drawing all opaque objects in any arbitrary order and then drawing the transparent ones in back to front order with depth testing enabled to have them
propperly drawn underneath opaque rectangles that are in front of them.