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>

修改： example

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

对于我来说，我通过使父母溢出来解决它：隐藏更大，然后给周围元素减去边距。

覆盖溢出：隐藏

3 个答案: