html - 覆盖溢出 : hidden

Question

我有一个包含很多子元素的父容器。由于动画原因(子元素滑入和滑出父元素)，我将其 overflow 属性设置为 hidden。

这很好用，但我确实希望有几个 child 在 parent 的边界之外可见。

我如何做到只有某些 child 在 parent 的边界之外可见？

Answer 1

答案是:你不能。父级有 overflow:hidden 那么所有的子元素都将被剪裁，或者你有 overflow:(visible|auto|scroll|...) 那么所有的子元素都是按照那个规则处理。您不可能混合状态 - 所有 child 都受到平等对待。

但是，您可以在父级(不再有溢出:隐藏)中引入额外的容器元素，就像在这个伪代码中一样:

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

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

编辑: example