posicionamiento - CSS: Cómo tener posición: div absoluto dentro de una posición: div relativo no puede ser recortado por un desbordamiento: oculto en un contenedor
posicionar div html (4)
No hay una solución mágica para mostrar algo fuera de un contenedor oculto de desbordamiento.
Se puede lograr un efecto similar al tener un div posicionado absoluto que coincida con el tamaño de su elemento primario ubicándolo dentro de su contenedor relativo actual (el div que no desea recortar debe estar fuera de este div):
#1 .mask {
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
overflow: hidden;
}
Tenga en cuenta que si solo tiene que recortar contenido en el eje x (que parece ser su caso, ya que solo ha configurado el ancho del div), puede usar overflow-x: hidden .
Tengo 3 niveles de div :
- (En verde a continuación) Un
divnivel superior conoverflow: hidden. Esto se debe a que quiero que algún contenido (que no se muestra aquí) dentro de ese recuadro sea recortado si excede el tamaño del cuadro. - (En rojo a continuación) Dentro de esto, tengo
divconposition: relative. El único uso para esto es para el siguiente nivel. - (En azul a continuación) Finalmente un
divque saco del flujo con laposition: absolutepero que quiero posicionar en relación con eldivrojo (no a la página).
Me gustaría que la caja azul salga del flujo y se expanda más allá de la caja verde, pero se posicionará con relación al cuadro rojo como en:
Sin embargo, con el siguiente código, obtengo:
Y eliminando la position: relative en el recuadro rojo, ahora el recuadro azul puede salir del recuadro verde, pero ya no está colocado en relación con el recuadro rojo:
¿Hay alguna manera de:
- Mantenga el
overflow: hiddenen el cuadro verde. - ¿La caja azul se expande más allá del recuadro verde y se coloca en relación con el recuadro rojo?
La fuente completa, con CSS en línea por el bien de la prueba:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<body>
<br/><br/><br/>
<div id="1" style="overflow: hidden; background: #efe; padding: 5px; width: 125px">
<div id="2" style="position: relative; background: #fee; padding: 2px; width: 100px; height: 100px">
<div id="3" style="position: absolute; top: 10px; background: #eef; padding: 2px; width: 75px; height: 150px"/>
</div>
</div>
</body>
</html>
Realmente no veo una manera de hacer esto tal como está. Creo que es posible que necesite eliminar el overflow:hidden de div # 1 y agregue otro div dentro de div # 1 (es decir, como un hermano para div # 2) para contener su ''contenido'' no especificado y agregar el overflow:hidden para eso en su lugar. No creo que el desbordamiento se pueda (o se deba poder) sobrepasar.
Si hay otro contenido que no se muestra dentro del div externo (el recuadro verde), ¿por qué no tener ese contenido dentro de otro div, vamos a llamarlo "content" ? Tener desbordamiento oculto en este nuevo div interno, pero mantener el desbordamiento visible en el recuadro verde.
La única pega es que tendrás que perder el tiempo para asegurarte de que el contenido div no interfiere con el posicionamiento de la caja roja, pero parece que deberías poder solucionarlo con poco dolor de cabeza.
<div id="1" background: #efe; padding: 5px; width: 125px">
<div id="content" style="overflow: hidden;">
</div>
<div id="2" style="position: relative; background: #fee; padding: 2px; width: 100px; height: 100px">
<div id="3" style="position: absolute; top: 10px; background: #eef; padding: 2px; width: 75px; height: 150px"/>
</div>
</div>
Un truco que funciona es colocar el cuadro n. ° 2 con la position: absolute lugar de position: relative . Usualmente ponemos una position: relative en una caja externa (aquí caja # 2) cuando queremos una caja interna (aquí caja # 3) con position: absolute para ser posicionada en relación a la caja externa. Pero recuerde: para que la casilla n. ° 3 se coloque en relación con la casilla n. ° 2, la casilla n. ° 2 solo necesita colocarse. Con este cambio, obtenemos:
Y aquí está el código completo con este cambio:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
/* Positioning */
#box1 { overflow: hidden }
#box2 { position: absolute }
#box3 { position: absolute; top: 10px }
/* Styling */
#box1 { background: #efe; padding: 5px; width: 125px }
#box2 { background: #fee; padding: 2px; width: 100px; height: 100px }
#box3 { background: #eef; padding: 2px; width: 75px; height: 150px }
</style>
</head>
<body>
<br/><br/><br/>
<div id="box1">
<div id="box2">
<div id="box3"/>
</div>
</div>
</body>
</html>
Agregué más detalles sobre esto en la caja Absolutamente posicionada dentro de una caja con desbordamiento: automático u oculto .