layout con div e position

[zero absolute]

Salve a tutti,
Premetto che non ho dimestichezza con i css.

Ho necessità di creare un layout con elementi che si sovrappongono (vedi esempio allegato), ho provato ad usare i tag "div" con l'elemento "position" dei css e fino a qui tutto bene non mi è sembrato difficile.
Il problema è che se il rettangolo rosso si allunga in altezza, il rettangolo verde deve modificare la sua posizione mantenendo sempre la stessa distanza dal rettangolo rosso e qui ho trovato tanti problemi mi sono scervellato ma non ho trovato soluzione voi mi sapete dire qualcosa???

[Mich_]

Il problema e` proprio il posizionamento assoluto.
E` una delle cose piu` difficili da usare con i CSS, e nel 99% dei casi non c'e` necessita` di usarlo.

Se l'elemento presentato azzurrino e` un elemento decorativo, lo puoi mettere come immagine di sfondo (che puoi posizionare a piacimento con il background-position).
Se invece e` un elemento che contiene informazioni, la cosa si presenta piu` complessa; ma prima di procedere e` necessaria una domanda: sei sicuro di voler inserire del contenuto in una posizione dove non verra` visto? Ha senso il tutto?

[zero absolute]

sei sicuro di voler inserire del contenuto in una posizione dove non verra` visto? Ha senso il tutto?

ottima domanda ma soprattutto legittima.

effettivamente sia il rettangolo rosso che il rettangolo verde conterranno informazioni dinamiche, quindi nel caso si allunghino in altezza:

il verde deve avere sempre la stessa distanza dal rosso ed in più potrebbe uscire dall'azzurrino.
Poi te lo mostrato con tre rettangoli giusto per farti capire ma la grafica è più ricca.

Cmq non voglio rovinare la giornata a nessuno se vi vengono in mente escamotage sono tutto orecchi

[Mich_]

Io l'escamotage l'ho gia` pronto ...

Metti i blocchi rosso e verde dentro un ulteriore blocco (cornice nera).
Il blocco azzurro sara` posizionato in modo assoluto con z-index
il nero pure con z-index maggiore dell'azzurro
i blocchi rosso e verde sono inseriti nel nero senza posizionamenti; il verde avra` margini opportuni.

Poi dovrai sistemare gli sfondi di tutti i blocchi (trasparenti o del colore che vuoi).

[zero absolute]

Grazie 1000.
Ho provato, in questo modo però il rettangolo verde rimane sopra quello azzurro.

Che intreccio HHEE!!
sti webdesigner no possono disegnare cose più semplici

[Mich_]

Certo che resta sopra. Nelle pagine Web non ci possono essere oggetti "compenetrati".

Pero` se dai uno sfondo semitrasparente al verde, vederai in trasparenza qualcosa di quello azzurro.

Per lo sfondo semitrasp, devi usare una immagine (.gif o, meglio, una .png) da mettere come sfondo, e definire transparent il colore di sfondo.
Se usi una .png e vuoi che si veda anche in IE6, dovrai inserire il behaviour opportuno (con una ricerca nel forum trovi la sintassi corretta).

[zero absolute]

Grazie 1000 di nuovo ora so come muovermi
per le png ed ie6 sono a già conoscenza di come devo fare, ma sempre grazie a voi