position:absolute... che ne è dei margini!?

**mahamatt** · 07-02-2007, 17:36

Mi trovo impelagato in questa situazione...

All'interno di un div contenitore (liquido), si trova un elemento; il suo border-bottom deve percorrere l'interezza del div contenitore fino a 200px dal bordo sinistro; per ottenere questo, ho applicato all'elemento un margin-left:200px, e fin qui nessun problema.

Ma mi trovo, per questioni di compatibilità crossbrowser, a dover posizionare questo elemento ad una distanza esatta dai margini del div contenitore, ovvero top:30px e right:0.

Ho provato a risolvere il problema definendo position:absolute; top:30px; right:0, d'accordo, ma in questo modo il bordo inferiore dell'elemento si interrompe non appena termina la breve riga di testo, che è contenuta all'interno dell'elemento stesso.

Ho provato ad impostare width:100% all'elemento, ma in questo modo il comando left-margin viene ignorato, e il border occupa [U]tutta la larghezza del div contenitore[U], mentre dovrebbe fermarsi a 200px dal suo bordo sinistro.
(by the way: non posso applicare padding-left al div contenitore, perché l'elemento in questione è solo la testata...)

Insomma, perché position:absolute si mangia bordi, spazi e margini?!?

Qualcuno è in grado di aiutarmi?? Grazie mille...

**Leilond** · 07-02-2007, 17:54

"position: absolute" toglie completamente il blocco dalla sua posizione e lo mette alla posizione indicata rispetto al body o al suo contenitore SOLAMENTE se anche il contenitore ha "position: absolute"
Da quello che intuisco il tuo container non ha "position: absolute" e quindi il contenuto non è più "al suo interno" e la sua posizione è relativa al bordo della finestra e non del contenitore

**mahamatt** · 07-02-2007, 21:24

Il contenitore ha position:relative, ma questo non è rilevante.

position:absolute non mi crea alcun problema di posizionamento; l'unico problema, come ho spiegato, è solo che l'elemento (quindi, il suo border-bottom) dovrebbe occupare tutta la lunghezza del div container meno il valore impostato nei margini; mentre con position:absolute il blocco diviene di lunghezza uguale a ciò che contiene (in questo caso, testo), e l'attributo "margin" viene ignorato.

Per capire cosa intendo, genera un file html vuoto, incolla questo codice, e poi visualizza la pagina:

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html>
<head><title>prova</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>	
<body style="font-family: arial, helvetica">

<div style="width:85%; position:relative; min-width:300px; margin:1em auto ; background:#efefef; height:100px;">
<div style="position: relative; border-bottom:1px solid red; text-align:right; color:#999; margin-left:150px">Se uso position:relative il bordo è lungo quanto il container,
ed obbedisce al comando margin-left di 150px</div>
</div>

<div style="width:85%; position:relative; min-width:300px; margin:1em auto; background:#efefef; height:100px;">
<div style="position: absolute; top:30px; right:0; border-bottom:1px solid red; text-align:right; color:#999;">Ma se uso position:absolute, il bordo muore con la fine del testo.</div>

</div>
</body>
</html>

Allego uno screen della pagina.

Non è possibile fare in modo che la larghezza occupata dall'elemento absolute sia quella massima, come accade in relative?
Ho provato display:block, ma non funziona....

Grazie in anticipo a chiunque mi potrà aiutare!

**mahamatt** · 08-02-2007, 16:14

Dunque, ho provato ad informarmi e a fare qualche prova.

Secondo l'articolo "posizionamento degli elementi" (http://css.html.it/guide/lezione/40/...egli-elementi/ paragrafo "absolute"), Il posizionamento avviene sempre rispetto al box contenitore dell'elemento. Questo è rappresentato dal primo elemento antenato (ancestor) che abbia un posizionamento diverso da static.
Quindi, il funzionamento di position:absolute non avviene "SOLAMENTE se anche il contenitore ha "position: absolute", come è stato risposto; basta che l'elemento contenitore sia diverso da static (a meno che non sia sbagliato l'articolo).
Anche nella pagina di esempio, si dice: Il posizionamento assoluto avviene sempre rispetto al blocco contenitore dell'elemento purchè esso abbia un valore per positin diverso da static. Altrimenti il box contenitore è l'elemento radice HTML, come nel nostro caso.

Nel mio caso, il div contenitore ha position:relative, non static, e dunque (sempre stando all'articolo...) l'elemento absolute dovrebbe riferirsi al div contenitore, non al body.

Ho fatto alcuni esperimenti, attribuendo position:absolute anche al div container, come consigliato; ma questo non ha risolto il problema, che non riguarda il posizionamento in sé, ma il comportamento di margini e bordo nei confronti di elementi con position:absolute.

Se, come è probabile, c'è qualcosa che sbaglio o che fraintendo o che non mi è chiaro (sono abbastanza fresco di css), per favore, non esitate a farmelo notare. Thanks!!

**Mich_** · 08-02-2007, 16:54

Lo sappiamo tutti che in teoria dovrebbe essere riferito al contenitore, ma in pratica nei browser attuali non e` cosi`. E non so se questo e` un baco dei browser o ha una sua motivazione valida.

Un blocco assoluto segue una sua linea ereditaria, che lo porta fuori da blocchi non assoluti; lo stesso avviene (ma non in tutti i browser e solo in certe condizioni) per i blocchi con float.

La mia posizione e` di non usare posizionamenti assoluti, tranne se si deve sovrapporre due oggetti.
In linea di massima si riesce a risolvere tutte le situazioni senza posizionamenti: in prima approssimazione possiamo dire che l'attributo position non si deve usare.

Per affiancare due blocchi si usa il float (ricordarsi poi di "cancellarlo" con il clear).
Per posizionare in orizzontale si usano i margini (browser standard) e il text-align (browser IE).

**mahamatt** · 08-02-2007, 17:18

Grazie per le utili spiegazioni, eviterò di usare posizionamenti assoluti quando non strettamente necessari.

Però, a questo punto, domando: esiste un modo per posizionare un elemento verticalmente (in modo fisso e, se possibile, cross-browser), non rispetto al body, ma ad un elemento contenitore?

Con il float, ok, ma mi pare di capire che anche il float, in determinate situazioni, si comporti in modo strano...

**Mich_** · 08-02-2007, 18:12

Il top (oppure bottom) e left (o right) sono validi anche per il posizionamento relative, mentre non lo sono per lo static (che e` il default).

Pero` ribadisco che il margin e` il modo migliore per posizionare un oggetto.

Tieni anche presente, che non puoi trattare il Web come fosse carta stampata: non funziona.
Non conosci a priori le dimensioni della finestra, ne` le dimensioni del font (il browser le puo` sovrascrivere); non conosci neppure la dimensione dei px del monitor dell'utente, ne` tantomeno la sua acutezza visiva.
Sono tutte variabili che incidono sulla presentazione della pagina e di cui devi tenere conto.
Ecco quindi che il posizionamento fisso si scontra con tutte quelle limitazioni; invece un posizionamento fluido (o liquido) supera le limitazioni e presenta sempre il contenuto visibile.

Tra i "link utili" ci sono vari esempi di layout: un giretto ti potrebbe aiutare a capire molte cose.

**mahamatt** · 09-02-2007, 10:41

ok... ti ringrazio molto!

Discussione: position:absolute... che ne è dei margini!?

Strumenti discussione

Ricerca discussione

Visualizza

position:absolute... che ne è dei margini!?

Permessi di invio