[CSS] Nakładające się DIV-y

Witam.
Chciałbym uzyskać efekt nakładania się na siebie czterech "box-ów". A konkretnie:

Mam główny kontener o wymiarach 1000x600px.
Wewnątrz chciałbym ułożyć na jednakowej wysokości cztery inne kontenery, z których pierwszy będzie zaczynał się na 0px głównego kontenera, a ostatni kończył na 1000px głównego kontenera.

Przy założeniu, że cztery kontenery mają takie same wymiary (400x400px) muszę przesunąć trzy z nich o 200px w lewo względem położenia poprzedniego (żeby zmieściły się w tych moich 1000px).

Męczę się już dłuższy czas i za cholerę nie mogę wpaść na rozwiązanie.
Może ktoś pomóc?

pozdro

#main { width: 1000px; height: 600px; position: relative; }
#main>div { width: 400px; height: 400px; position: absolute; top: 0px; }
#d1 { left: 0px; outline: 1px solid black; }
#d2 { left: 200px; outline: 1px solid green; }
#d3 { left: 400px; outline: 1px solid blue; }
#d4 { left: 600px; outline: 1px solid red; }

<div id="main">
  <div id="d1">tresc</div>
  <div id="d2">tresc</div>
  <div id="d3">tresc</div>
  <div id="d4">tresc</div>
</div>

próbowałeś z position:absolute i warstwami (z-index)?

No i działa...
Wychodzi na to, że nie kumam relative i absolute - postaram się poprawić, dzięki dzek69!

@AklimX - właśnie o to chodzi: próbowałem, kombinowałem... Okazuje się, że nie rozumiem do końca.

Pozdro