Tengo un contenedor primario con muchos elementos secundarios. Debido a motivos de animación (elementos secundarios que se deslizan dentro y fuera del elemento principal), configuré la propiedad overflow en hidden.Desbordamiento de anulación: oculto
Esto funciona muy bien, pero hay un par de niños que sí quiero que sean visibles fuera de los límites de los padres.
¿Cómo hago para que solo algunos niños sean visibles fuera de los límites de los padres?
La respuesta es: No se puede. O el padre tiene overflow:hidden, luego todos los elementos secundarios serán recortados, o tiene overflow:(visible|auto|scroll|...), entonces todos los niños son tratados de acuerdo con esa regla. No hay posibilidad de que pueda mezclar estados: todos los niños son tratados por igual.
Sin embargo, se podría introducir contenedores-elementos adicionales dentro de la matriz (que ya no tiene overflow: hidden) como en este pseudo-código:
<parent>
<container1 style="overflow:hidden">
<!-- these will be clipped -->
<element>
<element>
</container>
<container2 style="overflow:visible">
<!-- these will be shown -->
<element>
<element>
</container>
</parent>
edición: example
A la luz de más discusión con OP, esta respuesta no ayuda. En cambio, vea los comentarios para aclarar con OP.
En primer lugar, ayuda si incluye algún código específico.
Genéricamente hablando, proporcionar un selector CSS que es más específica para el niño que la que establece el overflow: hidden;
Por ejemplo,
Estilo:
.hide-children div {overflow: hidden;}
.hide-children div.show-me {overflow: none;}
HTML:
<div class="hide-children">
<div class="child"></div>
<div class="child"></div>
<div class="child show-me"></div>
</div>
Pero como dije, solo después de un código de muestra se puede obtener una respuesta más significativa.
Eso establecería que el desbordamiento del niño no cambiara el desbordamiento del padre en relación con él. Un código específico complicaría demasiado el asunto. Solo necesito conocer la teoría. –
espera, hice la edición antes de verte comentar, por lo que podría ser irrelevante. – bPratik
Entonces, si lo entendí correctamente, si hay 5 hijos en un padre que tiene su desbordamiento como oculto, entonces quiere, digamos, 3 que se oculte cuando está fuera de los límites, pero 2 para ser visible. Si esto es correcto, ¿existe la posibilidad de agregar scripts para manejar esto? – bPratik
Para mí Lo solucioné haciendo que el padre con desbordamiento: oculto más grande y luego dando márgenes menos a los elementos circundantes.
puede por favor proporcionar una demostración, gracias de antemano. – ankitd
Hay este hilo maravilloso en stackoverflow que te encantará: http://stackoverflow.com/questions/6196725/how-does-the-css-block-formatting-context-work – YMMD
FYI, he añadido un ejemplo de violín . – Christoph