Simple CSS/HTML Question

Hi everyone,

Pretty basic question but I can’t figure out how to achieve these for an assignment if someone wouldn’t mind a quick pointer. I need to create three overlapping rectangles like shown:

Thanks!

Hi Minnesota31, welcome to the forums,

What is allowed / wanted to get the results? i.e. anything mandatory or forbidden?

Can you manage to wriite the mark-up and CSS for one rectangle?

You can use position: absolute and z-index for this. Post the code you have so far and we can help with the final tweaks. :slight_smile:

There are various ways to do what you want and all will involve some sort of positioning and most likely z-index (z-index only applies to positioned elements and determines which element is on top).

You can overlap elements in various ways including absolute, relative or indeed negative margins and which method you use depends on the criteria for your test.

If you can show us what you have tried so far then we can help but it wouldn’t be fair for us to give you the full solution without you trying first :slight_smile: