覆盖溢出:隐藏

Question

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

这很有效，但有几个孩子我确实希望在父母的边界之外可见。

如何使其只有某些子级在父级边界之外可见？

Answer 1

答案是:你不能。要么父元素有overflow:hidden，那么所有子元素都会被裁剪；要么你有overflow:(visible|auto|scroll|...)，那么所有的子元素都会根据这个规则来处理。你不可能混合不同的状态-所有的孩子都被平等对待。

但是，您可以在父元素中引入额外的容器元素(不再具有overflow:hidden)，如下面的伪代码所示：

<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.一起澄清

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

一般而言，提供一个比设置overflow: hidden;的选择器更特定于子对象的CSS选择器

例如,

风格：

.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

对我来说，我通过使用overflow来解决这个问题:隐藏更大的父元素，然后给周围的元素减去边距。