Div posizioni assolute e relative.....

Comprendo (div)entar matti, ma esagerare non fa bene alla salute.

Questo mini tutorial vi spiega come funzionano i vari allineamenti sfruttando
css Position.

Partiamo da una cosa semplice

Per ottenere questa pagina vi basta realizzare 4 div
1) {width:100%;height:100%}
2) {margin:0 auto;width:960px;background-color:yellow;}
3) {width:100px;height:100px;background-color:red;}
4) {width:100px;height:100px;background-color:lime;}

1) contiene 2)
2) contiene 3) e 4)

così:



Spostiamo il blocco verde

1) {width:100%;height:100%}
2) {margin:0 auto;width:960px;background-color:yellow;}
3) {width:100px;height:100px;background-color:red;float:left}
4) {width:100px;height:100px;background-color:lime;}



Spostiamo il Rosso al posto del verde
1) {width:100%;height:100%}
2) {margin:0 auto;width:960px;background-color:yellow;}
3) {width:100px;height:100px;background-color:red;float:right}
4) {width:100px;height:100px;background-color:lime;}

Rosso e verde uno sull'altro ..
1) {width:100%;height:100%}
2) {margin:0 auto;width:960px;background-color:yellow;}
3) {position:absolute;left:50;width:100px;height:100px;background-color:red;}
4) {width:100px;height:100px;background-color:lime;}

Rosso e verde uno sull'altro, ma in un altro modo.
1) {width:100%;height:100%}
2) {position:relative;margin:0 auto;width:960px;background-color:yellow}
3) {position:absolute;width:100px;height:100px;background-color:red;}
4) {position:absolute;top:10;width:100px;height:100px;background-color:lime;}


Non c'e' troppa chiarezza, quanto meno non è sempre specificato dove Mettere il RELATIVE. Ho fatto parecchie prove prima
di questo mini tutorial per comprendere quanto le posizioni siano "evanescenti".

Specificando nel div contenitore 2) il relative implica che tutti i div ( conenuti e con stile absolute ) faranno riferimento
alla posizione 0,0 (angolo in alto a sinitra).

Tutto quello che contine d4 non subirà variazioni, ma seguira la posizione in cui questo si trova.