css - remove - Hacer al niño visible fuera de un desbordamiento: padre oculto

position css

Question

En CSS, el overflow:hidden se establece en los 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 PREVIO es un elemento flotante, en realidad aparecerá yuxtaponerse a él. Es decir, si el hermano está float:left continuación, el contenedor con float:none overflow:hidden aparecerá a la derecha del hermano, sin nueva línea, como si estuviera flotando en el flujo normal. Si el hermano anterior es float:right entonces el contenedor aparecerá a la izquierda del hermano. Cambiar el tamaño de este contenedor lo mostrará centrado con precisión entre los elementos flotantes. Diga que si tiene dos hermanos anteriores, un float:left el 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?

Googlear en toda la web me da maneras de clear:both y expandir un contenedor ... pero no puedo encontrar ninguna solución alternativa para mantener el centrado del niño anterior izquierdo / derecho. Si hace que el contenedor se overflow:visible entonces el contenedor de repente ignora el flujo de diseño de los elementos flotantes y aparece en capas sobre el elemento flotante.

Entonces pregunta :

Tengo que tener el overflow:hidden del contenedor overflow:hidden para preservar el diseño ...

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

O

¿Cómo me overflow:visible para que pueda posicionar absolutamente a un niño en relación con el padre fuera del contenedor ... ¿AÚN MANTENGO el flujo de diseño similar a flotar de hermanos?

Answer 1

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

Tengo semi-soluciones que funcionan según la situación anterior ("Niños visibles en desbordamiento: padre oculto")

Si el div principal no necesita ser position: relative, simplemente configure los estilos secundarios a visibilidad: visible.

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

Aquí hay un ejemplo de mierda, simplemente publícalo 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>

Answer 2

Ninguna de las respuestas publicadas funcionó para mí. position: absolute ajuste position: absolute para el elemento hijo funcionó sin embargo.

Answer 3

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

Answer 4

Puede usar el clearfix para "preservar el diseño" de la misma manera que lo hace el overflow: hidden .

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

agregue la class="clearfix" al padre y elimine el overflow: hidden;