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

144

Tengo 3 niveles de div:

  • (En verde debajo) Un nivel superior divcon overflow: hidden. Esto se debe a que quiero recortar algo de contenido (no mostrado aquí) dentro de ese cuadro si excede el tamaño del cuadro.
  • (En rojo abajo) Dentro de esto, tengo divcon position: relative. El único uso para esto es para el siguiente nivel.
  • (En azul a continuación) Finalmente div, saco del flujo position: absolutepero quiero posicionarlo en relación con el rojo div(no con la página).

Me gustaría que el cuadro azul se elimine del flujo y se expanda más allá del cuadro verde, pero se coloque en relación con el cuadro rojo como en:

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

Y quitando el position: relativecuadro rojo, ahora se permite que el cuadro azul salga del cuadro verde, pero ya no está posicionado en relación con el cuadro rojo:

¿Hay alguna manera de:

  • Mantenga el overflow: hiddenen el cuadro verde.
  • ¿El cuadro azul se expande más allá del cuadro verde y se posiciona en relación con el cuadro rojo?

La fuente completa:

#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>
Expandir fragmento

css overflow css-position avernet
fuente
44
+1 para preguntas bien formateadas y código fuente
graphicdivine
Aclaración: ¿Entonces desea que el cuadro azul (el div más interno) pueda desbordarse del cuadro verde (el div más externo) pero mantener el desbordamiento oculto en el cuadro verde? Básicamente, hay un desbordamiento oculto en todo en el cuadro verde, EXCEPTO el cuadro azul, ¿es así?
Anthony
Anthony, sí, esto es exactamente. Y no me importa lo que le suceda al cuadro rojo (# 2), que está ahí para influir en la parte superior / derecha del cuadro azul (# 3).
avernet
2
+1 por explicar adecuadamente una pregunta que pensé que era demasiado difícil de explicar pero que realmente quería una respuesta.
Andrew Mao
position: fixedignorará overflow:hiddencualquier elemento que lo contenga.
Kevin Beal

Respuestas:

48

Un truco que funciona es colocar la casilla # 2 en position: absolutelugar de position: relative. Por lo general, colocamos un position: relativeen una caja externa (aquí cuadro # 2) cuando queremos que se coloque una caja interna (aquí cuadro # 3) position: absoluteen relación con la caja externa. Pero recuerde: para que la casilla n. ° 3 se posicione en relación con la casilla n. ° 2, la casilla n. ° 2 solo debe 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>
avernet
fuente
55
en realidad lo usé position: staticy eso funcionó mejor para mí
Jason
@ Jason, muy interesante; entonces estás diciendo que usas position: staticen la casilla # 2 en lugar de position: absolute.
avernet
1
¿Puedes explicar por qué absoluteno se corta pero se relativecorta?
Andrew Mao
1
Esta solución no funcionará a menos que haga que todo entre # 1 y # 3 sea absoluto. Hablando prácticamente, esto es imposible.
windmaomao
1
Preguntándome cuál es el propósito de explicar algo tan visual usando colores como ese ...
ed1nh0
5

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 de posición absoluta que coincida con el tamaño de su padre al colocarlo 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 el contenido en el eje x (que parece ser su caso, ya que solo ha establecido el ancho del div), puede usarlo overflow-x: hidden.

tornillo
fuente
0

Realmente no veo una manera de hacer esto tal como está. Creo que es posible que deba eliminar el overflow:hiddendiv # 1 y agregar otro div dentro del div # 1 (es decir, como un hermano del div # 2) para mantener su 'contenido' no especificado y agregarlo overflow:hiddena eso. No creo que el desbordamiento pueda ser (o debería ser posible) anulado.

graphicdivine
fuente
0

Si no se muestra otro contenido 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 inconveniente es que tendrá que perder el tiempo para asegurarse de que el contenido div no interfiera con la posición del cuadro rojo, pero parece que debería poder solucionarlo con un poco de 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>
Antonio
fuente