CSS: Cómo tener posición: div absoluto dentro de una posición: div relativo no ser recortado por un desbordamiento: oculto en un contenedor

Tengo 3 niveles de div:

  • (En verde abajo) Un nivel superior div con overflow: hidden. Esto se debe a que quiero que algún contenido (no se muestra aquí) dentro de esa caja se recorte si excede el tamaño de la caja.
  • (En rojo abajo) Dentro de esto, tengo div con position: relative. El único uso para esto es para el siguiente nivel.
  • (En azul abajo) Finalmente un div Saco del flujo con position: absolute pero que quiero posicionado en relación con el rojo div (no a la página).

Me gustaría tener el cuadro azul sale del flujo y expandirse más allá de la caja verde, pero se sitúa en relación con el cuadro rojo como en:

Sin embargo, con el siguiente código, obtengo:

Y eliminando el position: relative en la caja roja, ahora se permite que la caja azul salga de la caja verde, pero ya no se coloca en relación con la caja roja:

Hay una manera a:

  • Mantenga el overflow: hidden en el recuadro verde.
  • ¿Se ha expandido el recuadro azul más allá del recuadro verde y se ha colocado 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>
Author: Laurel, 2010-02-11
Source

4 answers

Un truco que funciona es colocar la casilla #2 con position: absolute en lugar de position: relative. Por lo general, ponemos un position: relative en una caja exterior (aquí cuadro #2) cuando queremos que una caja interior (aquí cuadro #3) con position: absolute se coloque en relación con la caja exterior. Pero recuerde: para que la caja #3 se coloque en relación con la caja #2, la caja #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>

He añadido más detalles sobre esto en Absolutamente caja colocada dentro de una caja con desbordamiento: automático u oculto .

 46
Author: avernet,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-04-24 05:02:34

No hay una solución mágica de 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 padre colocá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 establecido el ancho del div), puede usar overflow-x: hidden.

 5
Author: vise,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-02-11 09:19:29

Realmente no veo una manera de hacer esto tal cual. Creo que es posible que deba eliminar el overflow:hidden del div#1 y agregar otro div dentro del div#1 (es decir, como hermano del div#2) para mantener su 'contenido' no especificado y agregar el overflow:hidden a eso en su lugar. No creo que el desbordamiento pueda ser (o deba ser) sobrepasado.

 0
Author: graphicdivine,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-02-11 09:14:24

Si hay otro contenido que no se muestra dentro del div exterior (el cuadro verde), por qué no tener ese contenido envuelto dentro de otro div, llamémoslo "content". Tenga el desbordamiento oculto en este nuevo div interno, pero mantenga el desbordamiento visible en el cuadro verde.

El único problema es que tendrás que jugar para asegurarte de que el div de contenido no interfiera con el posicionamiento de la caja roja, pero suena como que deberías poder arreglarlo 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>
 0
Author: Anthony,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-02-11 09:21:41