La larghezza di div con posizione assoluta dipende dalla larghezza del suo genitore?

Question

Mi piacerebbe avere la larghezza di un div con posizione assoluta a seconda del suo contenuto piuttosto che del suo genitore. Ad esempio,

<div style="position:absolute"> 
<div style="position:absolute"> 
    <div style="position:absolute">Div in Div</div> 
</div> 
</div> 

causerà il ritorno a capo, come mostrato nella http://jsfiddle.net/ymgfN/2/

Sembra che la larghezza del div interno dipenderà dalla larghezza del suo genitore, anche se la sua posizione è assoluta. Ad esempio, se specificiamo la larghezza al suo genitore, funzionerà come previsto (nessuna parola a capo): http://jsfiddle.net/ymgfN/3/

Sfortunatamente, non posso specificare la larghezza del genitore in anticipo - alla fine avrò la sua larghezza a dipendere da i suoi figli. E, devo usare la posizione assoluta. È possibile in puro CSS?

---

Alcuni retroscena: Io non sto cercando di fare una pagina per compiere qualche disegno - So che è folle da avere tre posizione assoluta impilati per qualsiasi richiesta ragionevole. Piuttosto, sto facendo qualche esperimento per vedere se il posizionamento assoluto può essere un approccio generale per risolvere una serie di problemi di layout (layout complicato versatile che di solito richiede l'uso intelligente di static/absolute/float). Sfortunatamente, mi sono imbattuto in questo problema che renderà l'idea di usare la posizione assoluta ovunque stupida.

Answer 1

L'elemento ottiene la sua larghezza e altezza prima dello viene rimosso dal flusso del documento. Quando si posiziona l'elemento esterno in modo assoluto, esso viene rimosso dal flusso e poiché non ha contenuto immediato, ha una larghezza di 0 e altezza di 0. Pertanto, un altro elemento di divisione al suo interno che tenta di aggiungere del testo eredita la larghezza del genitore di 0 Quindi espanderà solo la larghezza della parola più lunga per consentire il contenuto, quindi interromperà tutto su nuove linee. Dopo il, l'elemento viene rimosso dal flusso del documento da solo.

Quindi, per rispondere alla prima domanda, sì, un elemento posizionato in modo assoluto presta attenzione alle dimensioni dell'elemento principale se non si specifica una larghezza e/o altezza sull'elemento stesso. Sai quale dovrebbe essere la larghezza dei tuoi figli?

Per quanto riguarda la seconda domanda ... è possibile utilizzare white-space: nowrap. Non proprio un'ottima soluzione. Più preferibilmente, trova un modo migliore per organizzare il tuo contenuto in modo da non aver bisogno di tre elementi posizionati in modo assoluto annidati l'uno dentro l'altro. Dici che hai avere per usarli ... Davvero? È più probabile che tu non abbia trovato un modo migliore per farlo, ma questo è per un'altra domanda se scegli di intraprendere questa strada.

Answer 2

Un elemento a livello di blocco con position: absolute o fixed viene automaticamente associato alla larghezza del relativo genitore se non è impostato un valore fisso width. Se non vuoi una larghezza fissa per l'elemento figlio, puoi efficacemente aggirarlo dandogli un valore molto elevato margin-right, ad es.

.inner-div { 
    position: absolute; 
    margin-right: -10000px; 
} 

Poi sua larghezza sarà vincolata alla larghezza del genitore meno il margine negativo, quindi in pratica dipende solo dal suo contenuto.

violino aggiornamento: http://jsfiddle.net/ymgfN/53/