position:absolute & Co....

[dannie]

Ciao a tutti! Mi sono finalmente messa a studiare "seriamente" (o almeno ci provo... ) i CSS nell'ottica di usarli per un layout completo. In particolare ora stavo guardando gli ottimi esempi proposti da w3schools: trovo molto utile poter editare il codice e avere così immediato riscontro di "quello che succederebbe se..."!
Però i posizionamenti e affini non sono ancora riuscita a capirli bene.... magari potete aiutarmi voi??
Per esempio ora mi sono fermata qui: http://www.w3schools.com/css/tryit.a...trycss_zindex2
Vedendo il codice html mi sarei aspettata il "blocco" titolo seguito dall'immagine, seguita a sua volta dal paragrafo.... notando il posizionamento specificato nella classe img.x, mi sarei aspettata la sovrapposizione tra il titolo e l'immagine (sovrapposizione gestita quindi attraverso z-index), ma non fra l'immagine e il paragrafo successivo... cioè -scusate se sono un po' confusa ma effettivamente ho ancora un po' di confusione in testa- il titolo è la prima cosa inserita e quindi si posiziona in alto a sinistra (non avendo ulteriori specifiche sul posizionamento), l'immagine vi si sovrappone perchè ha come posizionamento assoluto l'angolo in alto a sinistra, ma il testo seguente perchè non si posiziona a fianco dell'immagine? :master:
Forse è una domanda stupida, nel qual caso portate pazienza, ma ci sto provando....

[AnFrusch@pepp]

Ciao.. prova con il float:

<style type="text/css">
img.x
{
position:realtive;
float: left;
}
</style>

in realtà fa posizionare l'immagine a sinistra, la propietà float fa in modo che il testo si posizioni alla destra sebbene la position sia relativa e quindi l'immagine sia 'dipendente' dagli elementi che la seguono..
in questo sito c'è una buona guida per iniziare a conoscere i CSS (e proprietà come il float)..

[dannie]

Ciao! Grazie per la risposta, ma in realtà quello che volevo sapere è il perchè del comportamento dell'esempio: sono abituata al "normale" HTML in cui se inserisci prima un'immagine e poi un testo finiranno per trovarsi uno a fianco dell'altro, ho letto che con i css è possibile fare di più, sovrapporre, mettere a sinistra degli elementi che nel codice sono inseriti dopo quelli che si vedono a destra ecc. ..e appunto sto cercando di capire in quali casi succede cosa... e in questo caso mi sfugge il perchè il testo del paragrafo si vada a sovrapporre all'immagine... qualcuno me lo sa spiegare in modo semplice?

[dannie]

Uhmmm.... da un altro post in questo forum:

Nel footer il clear:both non serve quando è posizionato in modo assoluto, perchè è fuori dal flusso.

:master: "perchè è fuori dal flusso"... potrebbe centrare qualcosa con quello che sto chiedendo io?

[TuttoTarocco]

il posizionamento assoluto fa in modo che l'elemento si comporti in maniera del tutto slegata dal resto.
L'unica cosa a cui fa riferimento è il suo elemento contenitore (in questo caso la pagina).
Gli attributi left e top indicano appunto la distanza dell'elemento dal suo contenitore rispettivamente da sinistra e dall'alto.
Quindi l'immagine appare nell'angolo sinistro della pagina.

Invece, rimane sotto la scritta perchè il suo z-index è -1

Lo z-index è come un indicatore di livello. Un pò come quello di photoshop.
Gli elementi con z-index maggiore vengono posizionati davanti a quelli con z-index minore.
In questo caso l'immagine viene spostata su un livello inferiore e quindi appare dietro.

Spero di essere stato esauriente.
Anche io sono alle prime armi con i css.

[dannie]

Beh, per essere alle prime armi sei stato molto chiaro!
Quindi, il paragrafo si posiziona in quel modo perchè in realtà si posiziona "a seguire" il titolo, ignorando l'immagine che ha posizionamento assoluto? Questo in effetti spiega anche perchè se tolgo il titolo, il paragrafo vada a posizionarsi in alto a sinistra....
A proposito dello z-index, mi sembrava un concetto abbastanza semplice, ma poi mi sono scontrata con la dura realtà della pratica... L'esempio che ho linkato funziona correttamente, ma la paginetta che ho creato io seguendolo no! Ho un'immagine e un div, entrambi con posizionamento assoluto in alto a sinistra e con uno specifico z-index ...ma con firefox se metto z-index <0 l'elemento sparisce! Ad esempio se l'immagine ha z-index=0 e il div z-index=1 vedo -come nell'esempio- il testo sopra l'immagine (sia con IE che con FF), invece mettendo i due z-index ripettivamente -1 e 0 continuo a vedere la stessa cosa in IE mentre in FF l'immagine non si vede più..... Per caso hai un suggerimento sul perchè succeda questo?

[TuttoTarocco]

Quà viene fuori tutta la mia inesperienza. Anche io ho studiato in teoria gli z-index, ma quando sono arrivato a programmare ho dovuto aggirarli trovandomi di fronte allo steso identico problema.
Non so se siano pienamente supportati e da quali browser, o forse semplicemente non li so far funzionare.
Ma in entrambi i casi ci dovrà dare una mano qualcuno più esperto.

[dannie]

Ok, allora mettiamoci in attesa di qualche guru....

[zoom]

:master:
non ho capito come hai fatto tu la pagina
:master:

[dannie]

Eccotela:

 <html>
<head>
<style type="text/css">
img.x
{
position:absolute;
left:0px;
top:0px;
z-index:-1
}
div.y
{
position:absolute;
left:0px;
top:0px;
z-index:1
}
</style>
</head>

<body>
[img]LIB.GIF[/img] 
<div class='y'>caption dell'immagine</div>
</body>

</html>

Con explorer si vede l'immagine sotto il testo, con firefox si vede solo il testo. Se metto a img.x z-index=0 si vede con entrambi l'immagine sotto il testo.... :master: