Hacer que el niño sea visible fuera de un desbordamiento: padre oculto

100

En CSS, overflow:hiddense establece en contenedores principales para permitir que se expanda con la altura de sus hijos flotantes.

Pero también tiene otra característica interesante cuando se combina con margin: auto...

Si el hermano PREVIOUS es un elemento flotante, aparecerá yuxtapuesto a él. Es decir, si el hermano es, float:leftentonces el contenedor con float:none overflow:hiddenaparecerá a la derecha del hermano, sin nueva línea, como si estuviera flotando en el flujo normal. Si el hermano anterior es, float:rightentonces el contenedor aparecerá a la izquierda del hermano. Cambiar el tamaño de este contenedor lo mostrará con precisión centrado entre los elementos flotantes. Digamos que si tiene dos hermanos anteriores, uno float:leftel otro float:right, el contenedor aparecerá centrado entre los dos.

Así que aquí está el problema ...

¿Cómo mantengo ese tipo de diseño SIN enmascarar a los niños?

Buscar en Google en toda la web me da formas de cómo clear:bothexpandir un contenedor ... pero no puedo encontrar ninguna solución alternativa para mantener el centrado del niño anterior izquierdo / derecho. Si crea el contenedor overflow:visible, el contenedor ignora repentinamente el flujo de diseño de los elementos flotantes y aparece en capas encima del elemento flotante.

Entonces pregunta :

Tengo que tener el contenedor overflow:hiddenpara preservar el diseño ...

¿Cómo puedo hacer que los niños no estén enmascarados? Necesito tener al niño absolutamente posicionado en relación con el padre fuera del contenedor.

O

¿Cómo overflow:visiblepuedo posicionar absolutamente a un niño en relación con el padre fuera del contenedor ... SIN EMBARGO, preservar el flujo de diseño tipo flotador hermano?

— Marknadal
fuente

86

Puede utilizar la función clearfixpara "preservar el diseño" de la misma forma que lo overflow: hiddenhace.

.clearfix:before,
.clearfix:after {
    content: ".";    
    display: block;    
    height: 0;    
    overflow: hidden; 
}
.clearfix:after { clear: both; }
.clearfix { zoom: 1; } /* IE < 8 */

agregar class="clearfix"clase al padre y eliminaroverflow: hidden;

— Frexuz
fuente

¡Hmm! Inteligente, acabo de experimentar con eso. Lo que estoy obteniendo actualmente es que el contenido generado se comporta correctamente, se conserva en el flujo del diseño, sin embargo, el padre aún lo ignorará y colocará una capa encima de los elementos flotantes. Sin embargo, esta es una muy buena idea y jugaré más con ella para ver si puedo hacer que se comporte correctamente y volver a votar. Gracias :).

— marknadal

@ user1671639 su ejemplo realmente no se aplica a una corrección clara. Necesita algo más, por lo que le sugiero que publique una pregunta con su problema.

— Frexuz

Esto no funciona de la misma manera que overflow:hiddenen absoluto. La aplicación de un clearfix al div padre no permite que todos los componentes secundarios estén "contenidos dentro" de la misma altura que el padre.

— Khom Nazid

11

Ninguna de las respuestas publicadas funcionó para mí. position: absoluteSin embargo, la configuración del elemento hijo funcionó.

— reflexivo
fuente

18

Pero, ¿no lo enmascararía el DIV padre si fuera más allá de los límites del DIV padre (que tiene desbordamiento: oculto)?

— marknadal

9

Afaik no lo hace, siempre que el padre no tenga posición: relativa. Luego, el hijo se coloca en relación con su primer elemento ancestro posicionado (no estático), sacándolo del flujo de dom regular (padre).

— Pim Schaaf

Si el padre tiene la posición: relativa y no la requiere, puede convertirla en posición: no establecida.

— yeahlad

Es cierto, si está position: fixedposicionado de forma absoluta en relación con algo fuera del padre que tiene visibility: hidden, será visible. Sin embargo, a menudo necesita (desea) colocarlo en relación con el padre para ser más robusto a los cambios de código. Entonces estas soluciones no son una alternativa.

— ArneHugo

10

Esta es una vieja pregunta, pero la encontré yo mismo.

Tengo semi-soluciones que funcionan situacionalmente para la pregunta anterior ("Niños visibles en desbordamiento: padre oculto")

Si el div padre no necesita ser posición: relativo, simplemente establezca los estilos secundarios en visibilidad: visible.

Si el div padre necesita ser posición: relativa, la única forma posible que encontré para mostrar a los hijos fue posición: fija. Afortunadamente, esto funcionó para mí en mi situación, pero me imagino que no funcionaría en otras.

Aquí hay un ejemplo de mierda que simplemente publique en un archivo html para verlo.

<div style="background: #ff00ff; overflow: hidden; width: 500px; height: 500px; position: relative;">
    <div style="background: #ff0000;position: fixed; top: 10px; left: 10px;">asd
        <div style="background: #00ffff; width: 200px; overflow: visible; position: absolute; visibility: visible; clear:both; height: 1000px; top: 100px; left: 10px;"> a</div>
    </div>
</div>

— Thomas Davis
fuente

Aquí hay un ejemplo de mierda, solo publícalo en un archivo html para verlo. <código> <div style = "fondo: # ff00ff; desbordamiento: oculto; ancho: 500 px; alto: 500 px; posición: relativa;"> <div style = "fondo: # ff0000; posición: fija; arriba: 10 px; izquierda : 10px; "> asd <div style =" background: # 00ffff; ancho: 200px; desbordamiento: visible; posición: absoluta; visibilidad: visible; claro: ambos; altura: 1000px; superior: 100px; izquierda: 10px; "> a </div> </div> </div> </code>

— Thomas Davis

4

Gracias por intentar responder, pero esto no funciona porque la posición fija coloca automáticamente el elemento en relación con la ventana gráfica, lo que significa que no se mueve con el padre. De hecho, si tiene una página de desplazamiento, permanecerá en 10px, 10px mientras se desplaza.

— marknadal

"Si el div padre necesita ser posición: relativa, la única forma posible que encontré para mostrar los hijos fue posición: fija". Gracias por eso. Tuve una burbuja de ayuda emergente que necesitaba desbordarse a pesar de que el padre tenía overflow: scroll. Terminé teniendo un div absoluto, con un interno relativo y luego un área de contenido fijo.

— JackMorrissey

Gracias, eso funcionó para mí. Tenía un padre con la posición relativa, y eso era necesario porque su posición se estableció usando left. Usar en su margin-leftlugar lograría el mismo efecto, por lo que ya no necesitaba usar la posición relativa.

— Felipe Castro

1

Para otros, si clearfix no resuelve esto por usted, agregue márgenes al hermano no flotante que sea el mismo que el ancho (s) de los hermanos flotantes.

— Walf
fuente