html - Overriding overflow: hidden

Question

I have a parent container with a lot of child elements. Due to animation reasons (child elements sliding in and out of the parent) I have set it's overflow property to hidden.

This works great but there are a couple of the children who I do want to be visible outside the parent's bounds.

How do I make it so that only certain children are visible outside the parent's bounds?

Answer 1

Answer is: You can't. Either the parent has overflow:hidden then all child-elements will be clipped, or you have overflow:(visible|auto|scroll|...) then all children are treated according to that rule. There is no possibility you could mix states - all children are treated equally.

However, you could introduce additional container-elements inside the parent (which no longer has overflow:hidden) like in this pseudo-code:

<parent>    
   <container1 style="overflow:hidden">
      <!-- these will be clipped -->
      <element>
      <element>
   </container>

   <container2 style="overflow:visible">
      <!-- these will be shown -->
      <element>
      <element> 
   </container>
</parent>

edit: example