覆盖溢出：隐藏答案

【问题标题】：Overriding overflow: hidden覆盖溢出：隐藏
【发布时间】：2013-11-28 19:38:20
【问题描述】：

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

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

如何使只有某些子级在父级范围之外可见？

【问题讨论】：

stackoverflow 上有一个你会喜欢的精彩线程：stackoverflow.com/questions/6196725/…
仅供参考，我添加了一个示例小提琴。

【解决方案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>

编辑：example

【讨论】：

【解决方案2】：

鉴于与 OP 的更多讨论，此答案无济于事。请参阅 cmets 以获取 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>

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

【讨论】：

这将设置孩子的溢出而不改变与它相关的父母的溢出。具体的代码会使我只需要知道理论的事情变得过于复杂。
等一下，我在看到你的评论之前就进行了编辑，所以可能无关紧要。
所以，如果我对您的理解正确，如果父项中有 5 个子项将其溢出为隐藏，那么您希望在边界外隐藏 3 个，但要隐藏 2 个可见的？。如果这是正确的，是否有可能添加脚本来处理这个问题？
这确实是我想要的，javascript / jQuery 也可以。
正确，正如@christoph 所说，这是不可能的。但这里有一些值得深思的地方：假设您的代码有一个外部 div u 包含包含 5 个孩子的父级-div p。现在，在 u 中，有 3 个孩子的副本，它们将使用它们的 visibility: hidden 适当地定位以逃避 p 的边界。现在，检测 3 个孩子中的每一个何时超出 p 的界限，并使他们的克隆在 u 中可见。

【解决方案3】：

对我来说，我通过使用 overflow:hidden 使父级变大然后给周围元素负边距来解决它。

【讨论】：