Posizionamento elementi (position)

[JANUS70]

Vediamo se riesco a trovare qualche buon'anima che mi fà capire stò benedetto posizionamento 'absolute'/'relative' ..
La prima cosa che non capisco è a cosa fanno riferimento le coordinate di una dichiarazione 'absolute' !

prendendo l'esempio estratto dall'articolo 'Barra di avanzamento animata solo con i CSS'
(http://css.html.it/articoli/leggi/26...olo-con-i-css/)

vedo che viene impostato un valore 'assoluto' dei 2 tag 'span' e 'em' attribuendo le coordinate
(top:8px; / top:0 ..
il risultato è che le coordinate fanno riferimento al tag 'p' che ospita i 2 tag in questione.
(questo però solo se la dichiarazione del tag 'p' è 'relative').
mi piacerebbe capire questo concetto.

tra l'altro ho fatto una mia prova con un 'div' all'interno di una cella di tabella 'td', dove il 'div'
è stato dichiarato 'absolute' e il 'td' è stato dichiarato 'relative' .. ma non mi funcsia !
il 'div' viene posizionato con le coordinate che fanno riferimento non al 'td' ma alla pagina !
spero di essermi spiegato bene
grazie mille



esempio dell'articolo:
/* SINGLE PROGRESS BAR */

.progressBar{ /* contenitore con immagine contenitore */
width:216px;
height:41px; /* altezza sfondo */
background:url(bg_bar.gif) no-repeat 0 0;
position:relative;
}
.progressBar span{ /* gif con avanzamento */
position:absolute;
display:block;
width:200px;
height:25px; /* altezza barra */
background:url(bar.gif) no-repeat 0 0;
top:8px;
left:8px;
overflow:hidden;
text-indent:-8000px;
}
.progressBar em{ /* copertura gif animata */
position:absolute;
display:block;
width:200px;
height:25px;
background:url(bg_cover.gif) repeat-x 0 0;
top:0;
}



<p class="progressBar">
<span><em style="left:50px">25%[/i]</span>
</p>

[Shores]

Le coordinate con cui posizioni un oggetto che ha position:absolute fanno sempre riferimento al primo contenitore padre che sia un oggetto che è di tipo blocco, per esempio tutti i tag a cui hai dato display:block lo sono, mentre i td che di default hanno display:table-cell NON lo sono, e che abbia position:relative.

Perdonami, comunque non capisco tanto il tuo test: che senso ha posizionare absolute un qualcosa riferendolo ad una cella di tabella: o usi le tabelle per impaginare (cosa che io ti sconsiglio) ma allora non hai bisogno di absolute, o viceversa le tabelle le usi solo per mostrare dati tabulari, nel qual caso non ha senso usare absolute sul contenuto di una cella!

In ogni caso, se proprio hai bisogno di posizionare absolute rispetto ad una cella basterà aggiungere una div di comodo e sei a posto:

<td><div style="position:relative"><div style="position:absolute>...

Ciao!

[JANUS70]

Grazie mille per la risposta .. ma non mi funcsia perfettamente:
allego immagine (considerando che il bordo del 'td' è il bordo giallo ...)




.button-cont{position: absolute;
top: 3px;
left: 15px;
margin: 1.5em 0}


<tr align="left" >
<td>
<div style="position:relative">
<div class="button-cont">
<span>Prova</span>
</div>
</div>
</td>


PS. perchè sconsigli l'impagginazione con tabelle ?

[Shores]

Diciamo che fare i layout tramite tabelle è fortemente sconsigliato oggi per più ragioni, prima di tutto la inutile complessità (tramite css riesci a fare tutto con un HTML molto più semplice), in secondo luogo la accessibilità sia a disabili che ai motori di ricerca/robots (i layout tableless sono molto più facilmente comprensibili a tutti gli strumenti speciali per i disabili) per finire con la progressione verso il web semantico, in cui giustamente le tabella vanno usate, proprio perché lHTML non dovrebbe contenere quasi nessun costrutto per l'impaginazione) solo per visualizzare dati davvero tabulari (per esempio un resoconto finanziario o una classifica di posizioni).

Per venire al tuo caso specifico: posta un link alla pagina completa, e spiegaci che cosa vorresti ottenere con questo strano posizionamento, che vedrai che ti troviamo una soluzione più semplice ed elegante.

[JANUS70]

Non ho un caso specifico .. stavo solo facendo una prova per capire come funziona stà benedetta position .. e in particolare la 'absolute' con coordinate riferite al contenitore che non fosse la pagina.

domanda che mi imbarazza un pò .. ma è da poco che mi sono avvicinato al web ..
come faccio a postarti un link .. non avendo siti ?

[JANUS70]

credo di aver capito il problema ..
bisogna indicare valign="top" e align="left" per il 'td' .. ed eliminare i margini !!