Posizionare un'alemento "div" sotto un'altro con i css

[deleted_193]

Salve, ho un problema con la stampa di alcuni elementi:

#contenitore{
top:200px;
left:200px;
position:absolute;
}

#contenitore, #elemento1{
top:0;
left:0;
position:relative;
}

#elemento1, #elemento2{
top:0;
left:0;
position:relative;
}

nella pagina html:
<div id="contenitore">
<div id="elemento1">...</div>
<div id="elemento2">...</div>
</div>

Teoricamente elemento2 dovrebbe stamparmelo sotto elemento1, invece me lo stampa addirittura sopra, ma io ho la necessità che me lo stampi sotto.
Sapreste spiegarmi come impostare il css, perchè ho provati in molti modi diversi, compreso riscrivere l'html ma non funziona.

[deleted_193]

Grazie per la risposta, ho provato nel modo che mi hai scritto, ma non funziona; poi ho provato anche così:

#contenitore{
top:200px;
left:200px;
position:absolute;
}

#contenitore #elemento1{
top:0;
left:0;
position:relative;
}

#elemento1 #elemento2{
top:0;
left:0;
position:relative;
}

Purtroppo non funziona neanhce questo, mi stampa sempre:
Ciao2
Ciao1,
mente dovrebbe essere:
Ciao1
Ciao2.

[deleted_193]

Ho appena scorperto l'errore, ma devo dire che mi lascia un pò "spiazzato":

<style>
#contenitore_di_contenitore{
...
position:absolute;
}
#contenitore_di_contenitore #contenitore{
top:200px;
left:200px;
position:relative;
}

#elemento1{
top:0;
left:0;
position:relative;/*questo è l'errore: se viene cambiato in absolute #elemento2 si posiziona sotto #elemento1, se viene lasciato relative non lo fà*/
}

.primo_sotto_elemento_di_(#elemento1){
top:0;
left:0;
position:relative;
}

.secondo_sotto_elemento_di_(#elemento1){
top:0;
left:0;
position:relative;
}

#elemento1 #elemento2{
top:0;
left:0;
position:relative;
}
</style>

In pratica ottengo un errore "visivo": lascio in #elemento1 absolute la pagina si posiziona in maniera corretta, a eccezzione di #elemento2 che và sopra #elemento1, mentre se metto position:relative, gli elementi vanno l'uno sotto l'altro, il problema è che vanno anche indietro da soli, fin qui niente problemi, perchè basterebbe spostarlo in avanti, ma purtroppo l'elemento ha delle sotto liste espandibili, e quando vengono selezionate l'espansione fà andare tutto ancora più indietro.
Ovviamente il prblema non era solo questo, altrimenti lo avrei inquadrato da tempo, ma ho passato gli elementi delle classi uno ad uno, per vedere i comportamenti, e alla fine ho corretto tutto, e scovato anche questa irregolarità(che prima non si formava a causa sia di display, che di word-wrap).
Detto questo ho notato che per vare una espansione corretta degli elementi di #elemento1, devo impostare per forza così:

#elemento1{
position:absolute;
}

.primo_sotto_elemento_di_(#elemento1){
position:relative;
}

.secondo_sotto_elemento_di_(#elemento1){
position:relative;
}

Alla luce di questo, come dovrei impostare #elemento2, visto hce se lascio absolute si posiziona sopra?

[deleted_193]

Ok, sono riuscito a far funzionare tutto, grazie per l'aiuto.

[deleted_193]

In realtà li uso molto propio per migliorare la struttura.
Ti faccio un esempio: mettiamo conto che faccio un contenitore con: "#css{ width:500px; height:500px, top:100px; left:100px; position:absolute}", adesso se io creo un contenitore con position relative: "#css #dentro_css{position:relative; padding: 10px 10px 0 0; height:auto; width:auto;}", il contenitore #dentro_css considererà #css come suo contenitore, e si posizionerà di coneguenza, se non lo avessi fatto avrebbe considerato body come contenitore, sballandomi le posizioni (teoricamente basterebbe mettere un div dentro un'altro, senza specificare troppo, ma ho notato che sballa la posizione, inoltre anche se fosse corretta la caricherebbe prima in un puntop sbagliato della pagina, per poi aggiustarla un istante dopo mettendola nel punto corretto).
Comunque stavo rifacendo da capo tutta la struttura per migliorarlo, renderlo compatibile con tutti i browser moderni, senza creare sbavature(per questo ho dovuto riscrivere css e codice html).