El ancho de div con la posición absoluta depende del ancho de sus padres?

Question

Me gustaría tener el ancho de un div con posición absoluta según su contenido en lugar de su elemento principal. Por ejemplo,

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

causará el ajuste de línea como se muestra en http://jsfiddle.net/ymgfN/2/

Parece que el ancho de la div interior dependerá de la anchura de su padre, a pesar de que su posición es absoluta. Por ejemplo, si se especifica la anchura de su matriz, que funcionará como se espera (sin ajuste de línea): http://jsfiddle.net/ymgfN/3/

Por desgracia, no puedo especificar el ancho de los padres con antelación - con el tiempo voy a tener su anchura a depender sus hijos. Y, tengo que usar la posición absoluta. ¿Es posible en CSS puro?

---

Algunos antecedentes: No estoy tratando de hacer una página para cumplir con algún diseño - Sé que es una locura tener tres posiciones absoluta apilado para cualquier demanda razonable. Más bien, estoy haciendo un experimento para ver si el posicionamiento absoluto puede ser un enfoque general para resolver una gama de problemas de diseño (diseño complicado y versátil que generalmente requiere el uso inteligente de estática/absoluta/flotante). Desafortunadamente, me encontré con este problema que hará que la idea de usar la posición absoluta en todas partes sea estúpida.

Answer 1

El elemento obtiene su ancho y alto antes de se elimina del flujo del documento. Cuando coloca el elemento externo de forma absoluta, se elimina del flujo y, dado que no tiene contenido inmediato, tiene un ancho de 0 y una altura de 0. Por lo tanto, otro elemento de división que intente agregar texto hereda el ancho principal de 0 Así que solo se expandirá al ancho de la palabra más larga para permitir el contenido, y luego dividirá todo lo demás en nuevas líneas. Después de se hace eso, elimina el elemento del flujo del documento para que se apague solo.

Por lo tanto, para responder a su primera pregunta, sí, un elemento con posición absoluta hace prestar atención a las dimensiones de su elemento padre si no se especifica una anchura y/o altura sobre el propio elemento. ¿Sabes cuál es el ancho de tus hijos?

En cuanto a su segunda pregunta ... puede usar white-space: nowrap. No es realmente una gran solución. Más preferiblemente, encuentre una mejor manera de organizar su contenido para que no necesite tres elementos posicionados de manera absoluta uno dentro del otro. Usted dice que tiene para usarlos ... ¿De verdad? Es más probable que simplemente no hayas encontrado una mejor manera de hacerlo, pero eso es por otra pregunta si decides ir por ese camino.

Answer 2

Un elemento de nivel de bloque con position: absolute o fixed se enlaza automáticamente al ancho de su principal si no se establece width fijo. Si no desea un ancho fijo para el elemento secundario, puede solucionar este problema dándole un alto margin-right, p. Ej.

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

Entonces su anchura estará obligado a la anchura de la matriz menos el margen negativo, por lo que en la práctica sólo dependerá de su contenido.

violín Actualizado: http://jsfiddle.net/ymgfN/53/