So I have an image being plotted with various geometric shapes. Sometimes one of the images overlaps another image. In this case I want one of the images to be in the foreground and one in the background. How would i go about doing this?

Render one image with all it’s shapes then render the other one. If you aren’t using the depth buffer, the second will always overlap the first. If you do need the depth buffer for rendering an image, render the first, clear the depth buffer, then render the second.