html - 覆盖溢出：隐藏

Question

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

这很好用，但我确实希望有几个孩子在父母的范围之外可见。

我如何才能使只有某些孩子在父母的范围之外可见？

Answer 1

答案是：你不能。要么父母有overflow:hidden然后所有的子元素都将被剪裁，或者你有overflow:(visible|auto|scroll|...)所有的孩子都根据该规则进行处理。您不可能混合州 - 所有孩子都受到平等对待。

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

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

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

编辑：示例

Answer 2

根据与 OP 的更多讨论，这个答案没有帮助。相反，请参阅评论以使用 OP 进行澄清。

首先，如果您包含一些特定的代码，它会有所帮助。

一般而言，提供一个CSS比设置overflow: hidden;

例如，

风格：

.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>

但是就像我说的，只有在一些示例代码之后才能提供更有意义的答案。

Answer 3

对我来说，我通过让父级溢出来解决它：隐藏更大，然后给周围元素负边距。