2013-01-14 12 views
27

Diciamo che ho due div, uno dentro l'altro, in questo modo:Esiste un modo per div "position: absolute" per mantenere la larghezza relativa?

<html> 
<body> 
<div id="outer" style="width:50%"> 
<div id="inner" style="width:100%"> 
</div> 
</div> 
</body> 
</html> 

In questo momento, il div interno ha una larghezza di 100% al 50% della dimensione dello schermo, o il 50% dello schermo dimensione. Se dovessi cambiare il div interno di posizione assoluta, in questo modo:

<html> 
<body> 
<div id="outer" style="width:50%"> 
<div id="inner" style="position:absolute;width:100%"> 
</div> 
</div> 
</body> 
</html> 

In questo caso il div interno occupa 100% dello spazio sullo schermo, perché la sua posizione viene impostata assoluto.

La mia domanda è questa: esiste un modo per mantenere la larghezza relativa del div interno mentre la sua posizione è impostata su assoluto?

risposta

54

Aggiungi posizione: relativa al tuo div esterno.

aggiornamento: Funziona perché le posizioni in position: absolute sono relative al primo genitore che ha un posizionamento (diverso da statico). In questo caso non c'era un contenitore del genere, quindi utilizza la pagina.

+2

Grazie per l'aiuto! Questo mi ha infastidito per circa un'ora. Sono contento che la soluzione sia così semplice :) – Charles

+2

OHHH AHHH !!! Ho passato le ultime 5 ore cercando di sistemare questo maledetto sito su cui stavo lavorando. Grazie mille per questo. Puoi spiegare perché funziona? – Lebowski156

+1

ok, questo è trolling, ma per una volta css ha una soluzione semplice per un semplice problema! Grazie! – mmuller

6

Sì. Imposta esterno alla posizione: relativo.

http://jsfiddle.net/57673/

.outer 
{ 
    width: 50%; 
    height: 200px; 
    position: relative; 
    border: 1px solid red; 
} 

.inner 
{ 
    width: 100%; 
    position: absolute; 
    height: 100%; 
    border: 1px solid blue; 
} 
+0

Grazie, stessa risposta di Bror! Ho capito subito :) – Charles