2013-04-02 23 views
13

Sono nuovo al css. Mi chiedo perché quando cambio il posizionamento dell'elemento div in assoluto, la larghezza dell'elemento div cambia? Provato in Chrome v25.0.1364.172m e IE9, entrambi hanno lo stesso risultato.la posizione assoluta influisce sulla larghezza?

semplice esempio:

<!doctype html/> 
<html> 
<head> 
    <title>test</title> 
    <style> 
     div { 
      position:relative; 
      border-width: 1px; 
      border-style: solid; 
      border-color: black; 
     } 
    </style> 
</head> 
<body> 
    <div>test</div> 
</body> 
</html> 
+0

hai applicato larghezza e altezza al codice di attivazione div? – XTGX

+0

La modifica della posizione su trigger assoluti è un [contesto di formattazione del blocco] (http://www.w3.org/TR/CSS2/visuren.html#block-formatting). – thgaskell

+0

XTG, non c'è altro codice. – lee23

risposta

23

Poiché gli elementi posizionati assolutamente non si comportano come livello di blocco elementi e non scorrono uno dopo l'altro come un normale <div> fa.

Sarà necessario impostare una larghezza e un'altezza per un div che è assolutamente posizionato, a seconda di ciò che contiene.

tuo elemento posizionato in modo assoluto posizionerà rispetto al primo elemento principale è in Quindi, un semplice esempio:.

Un semplice 'Gotcha' non è l'impostazione dell'elemento genitore di avere position: relative;

<!-- I'm a parent element --> 
<div style="width: 500px; height: 500px; position: relative; border: 1px solid blue;"> 

    <!-- I'm a child of the above parent element --> 
    <div style="width: 150px; height: 150px; position: absolute; left: 10px; top: 10px; border: 1px solid red;"> 
     I'm positioned absolutely to my parent. 
    </div> 

</div> 
+1

, ma ancora non capisco nessuna delle risposte. Il posizionamento non significa dove posizionare un elemento, quindi perché influisce sulla larghezza? – lee23

+1

Se il tuo elemento è un elemento a livello di blocco, riempirà il genitore in base al suo contenuto. Quindi, se avessi un sacco di testo di paragrafo all'interno di un div normale, il testo del paragrafo deciderebbe la dimensione del div in base ai tuoi stili CSS. Il posizionamento assoluto non è a livello di blocco, quindi non lo fa. – SMacFadyen

+0

ok, grazie per la spiegazione. – lee23

0

Poiché l'elemento, che si assegna in posizione assoluta, prende la larghezza dal genitore e non si comporta come un elemento di blocco.

Problemi correlati