CSS: Cómo tener Posición: div absoluta dentro de una position: relative no DIV se cortará un un desbordamiento: oculto en un contenedor

StackOverflow https://stackoverflow.com/questions/2243245

  •  19-09-2019
  •  | 
  •  

Pregunta

Tengo 3 niveles de div:

  • (en verde abajo) A div nivel superior con overflow: hidden. Esto se debe a que quiero algo de contenido (no se muestra aquí) dentro de esa caja a recortar si supera el tamaño de la caja.
  • (en rojo abajo) Dentro de esto, he div con position: relative. El único uso de esta es para el siguiente nivel.
  • (en azul abajo) Por último, un div saco del flujo con position: absolute pero que quiero posicionado con respecto a la div rojo (no a la página).

I gustaría tener la caja azul tomarse fuera del flujo y expandirse más allá de la caja verde, pero se coloca en relación con el cuadro rojo como en:

Sin embargo, con el código de abajo, me sale:

Y la eliminación de la position: relative en el cuadro rojo, ahora se permite que la caja azul para salir de la caja verde, pero no se posiciona más en relación con el cuadro rojo:

¿Hay una manera de:

  • Mantenga el overflow: hidden en la caja verde.
  • Haga que el cuadro azul expandirse más allá de la caja verde y se situarán en relación con el cuadro rojo?

La fuente completo: 

#d1 {
  overflow: hidden;
  background: #efe;
  padding: 5px;
  width: 125px;
}

#d2 {
  position: relative;
  background: #fee;
  padding: 2px;
  width: 100px;
  height: 100px;
}

#d3 {
  position: absolute;
  top: 10px;
  background: #eef;
  padding: 2px;
  width: 75px;
  height: 150px;
}
<br/><br/><br/>
<div id="d1" >
  <div id="d2" >
    <div id="d3"></div>
  </div>
</div>

¿Fue útil?

Solución

Un truco que funciona es posicionar la caja # 2 con position: absolute en lugar de position: relative. Ponemos generalmente un position: relative en una caja externa (en este caso la casilla # 2) cuando queremos una caja interior (en este caso la casilla # 3) con position: absolute que se coloca en relación con la caja exterior. Pero recuerde: para la caja # 3 para ser colocado en relación con la caja # 2, # 2 cuadro sólo tiene que ser colocado. 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>

añadí más detalles sobre esto en caja de posición absoluta dentro de una caja con rebosadero:. auto u oculta

Otros consejos

No hay una solución mágica de mostrar algo fuera de un contenedor oculto desbordamiento.

Un efecto similar puede conseguirse por tener un div posicionado absoluta que coincide con el tamaño de su padre al colocarla dentro de su respectivo contenedor actual (el div que no desea clip debe estar fuera de este div): 

#1 .mask {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
  overflow: hidden;
}

Tome en cuenta que si es suficiente con clip de contenido en el eje x (que parece ser el caso, ya que sólo se ha ajustado el ancho de la div), puede utilizar overflow-x: hidden.

Realmente no veo una manera de hacer esto como está. Creo que es posible que tenga que quitar la overflow:hidden de div # 1 y añadir otro div dentro div # 1 (es decir, como un hermano a DIV # 2) para mantener su 'contenido' no especificado y añadir la overflow:hidden a su lugar. No creo que se desbordan puede ser (o debería ser capaz de ser) sobre-montado.

Si hay otros contenidos que no se muestra en el interior del div-exterior (la caja verde), ¿por qué no tiene ese contenido envuelto dentro de otro div, vamos a llamarlo "content". Han desbordamiento oculta en esta nueva centro de la div, pero mantener desbordamiento visible en la caja verde.

El único problema es que a continuación, tendrá que perder el tiempo para asegurarse de que el div contenido no interfiere con la colocación de la caja roja, pero suena como usted debería ser capaz de arreglar eso 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>
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top