html - quemar - porque solo engordo de la cintura para arriba
¿Hay alguna manera para que "position: absolute" div retenga el ancho relativo? (2)
Digamos que tengo dos divs, uno dentro del otro, así:
<html>
<body>
<div id="outer" style="width:50%">
<div id="inner" style="width:100%">
</div>
</div>
</body>
</html>
En este momento, la división interna tiene un ancho del 100% del 50% del tamaño de la pantalla, o el 50% del tamaño de la pantalla. Si tuviera que cambiar el div interior a la posición absoluta, así:
<html>
<body>
<div id="outer" style="width:50%">
<div id="inner" style="position:absolute;width:100%">
</div>
</div>
</body>
</html>
En este caso, la división interna ocupa el 100% del espacio de la pantalla, porque su posición se establece en absoluta.
Mi pregunta es la siguiente: ¿hay alguna manera de mantener el ancho relativo de la división interna mientras su posición se establece en absoluta?
Añadir posición: relativa a su div exterior.
actualización : funciona porque las posiciones en position: absolute son relativas al primer padre que tiene algún posicionamiento (que no sea estático). En este caso no existía tal contenedor, por lo que utiliza la página.
Sí. Establecer exterior a la posición: relativa.
.outer
{
width: 50%;
height: 200px;
position: relative;
border: 1px solid red;
}
.inner
{
width: 100%;
position: absolute;
height: 100%;
border: 1px solid blue;
}