使孩子在溢出之外可见：隐藏的父母答案

【问题标题】：Make child visible outside an overflow:hidden parent使孩子在溢出之外可见：隐藏的父母
【发布时间】：2011-03-24 04:23:22
【问题描述】：

在 CSS 中，overflow:hidden 设置在父容器上，以便允许它随着浮动子容器的高度而扩展。

但与margin: auto结合使用时，它还有另一个有趣的功能...

如果 PREVIOUS 兄弟是一个浮动元素，它实际上会与其并列出现。也就是说，如果兄弟是float:left，那么带有float:none overflow:hidden 的容器将出现在兄弟的右侧，没有换行符——就像它在正常流程中浮动一样。如果前一个兄弟是float:right，那么容器将出现在兄弟的左侧。调整此容器的大小将准确地显示它在浮动元素之间居中。假设您之前有两个兄弟姐妹，一个 float:left 另一个 float:right，容器将显示在两者之间。

这就是问题...

如何在不屏蔽子项的情况下保持这种类型的布局？

在整个网络上进行谷歌搜索为我提供了如何clear:both 和扩展容器的方法......但我找不到任何替代解决方案来保持左/右前一个子元素居中。如果你将容器设为overflow:visible，那么容器会突然忽略浮动元素的布局流程，并出现在浮动元素之上。

所以问题：

我必须拥有容器 overflow:hidden 来保留布局...

我怎样才能让孩子们不被蒙面？我需要让孩子相对于容器外的父母绝对定位。

或

我如何overflow:visible 这样我就可以相对于容器外部的父级绝对定位一个子级...但保留兄弟级浮动布局流？

【问题讨论】：

标签： css overflow css-float center hidden

【解决方案1】：

您可以像overflow: hidden 一样使用clearfix 进行“布局保留”。

.clearfix:before,
.clearfix:after {
    content: ".";    
    display: block;    
    height: 0;    
    overflow: hidden; 
}
.clearfix:after { clear: both; }
.clearfix { zoom: 1; } /* IE < 8 */

将class="clearfix" 类添加到父类，并删除overflow: hidden;

【讨论】：

嗯！聪明，我现在正在试验它。我目前得到的是生成的内容行为正确，被保留在布局的流程中，但是父级仍然会忽略它并在浮动元素之上分层。然而，这是一个非常好的主意，我会更多地使用它，看看我是否能让它表现得正确，并重新投票。谢谢你:)。
@user1671639 您的示例并不真正适用于 clearfix。你需要别的东西，所以我建议你发布一个关于你的问题的问题。
这与overflow:hidden 完全不同。对父 div 应用 clearfix 不允许所有子组件“包含在”与父组件相同的高度内。

【解决方案2】：

发布的答案都不适合我。但是，为子元素设置 position: absolute 确实有效。

【讨论】：

但是如果父DIV超出了父DIV的边界（溢出：隐藏），它不会屏蔽掉吗？
Afaik 它没有，只要父级没有位置：相对。然后子元素相对于它的第一个定位（非静态）祖先元素进行定位，将其从常规（父）dom 流中取出。
如果父级确实有 position:relative 并且不需要它，您可以将其设为 position:unset。
是的，如果它是position: fixed 或相对于具有visibility: hidden 的父对象外部的绝对位置，它将是可见的。但是，您经常需要（想要）将其相对于父级定位，以便对代码更改更加健壮。那么这些解决方案就不是替代品了。
@marknadal 这正是我现在遇到的问题，导致我提出这个问题

【解决方案3】：

这是一个老问题，但我自己也遇到过。

我有针对前一个问题的半解决方案（“孩子在溢出中可见：隐藏的父母”）

如果父 div 不需要是 position:relative，只需将子样式设置为 visibility:visible。

如果父 div 确实需要位置：相对，我发现显示子元素的唯一可能方法是位置：固定。幸运的是，这在我的情况下对我有用，但我想它不会在其他人身上工作。

这是一个糟糕的示例，只需发布到 html 文件中即可查看。

<div style="background: #ff00ff; overflow: hidden; width: 500px; height: 500px; position: relative;">
    <div style="background: #ff0000;position: fixed; top: 10px; left: 10px;">asd
        <div style="background: #00ffff; width: 200px; overflow: visible; position: absolute; visibility: visible; clear:both; height: 1000px; top: 100px; left: 10px;"> a</div>
    </div>
</div>

【讨论】：

这是一个糟糕的示例，只需发布到 html 文件中即可查看。 asd 一个
感谢您尝试回答，但这不起作用，因为固定位置会自动相对于视口定位元素，这意味着它不会与父级一起移动。事实上，如果你有一个滚动页面，它会在你滚动时保持在 10px,10px。
"如果父 div 确实需要位置：相对，我发现显示子元素的唯一方法是位置：固定。"感谢那。我有一个弹出帮助气泡需要溢出，即使父级溢出：滚动。我最终得到了一个绝对 div，一个相对内部，然后是一个固定内容区域。
谢谢，这对我有用。我有一个具有相对位置的父级，这是需要的，因为它的位置是使用left 设置的。改用margin-left也能达到同样的效果，所以就不用再使用position relative了。

【解决方案4】：

对于其他人，如果 clearfix 不能为您解决此问题，请向与浮动兄弟的宽度相同的非浮动兄弟添加边距。

【讨论】：

【解决方案5】：

对于其他人，如果这不起作用，请尝试在您需要滚动条的组件中的 vh 中指定高度。

.parent {
     overflow: hidden
}

.child {
     overflow: overlay,
     height: 100vh
}

【讨论】：

是的，成功了！我想这对其他人来说会更清楚.parent { overflow: hidden; } .child { overflow: overlay; height: 100vh; }

【解决方案6】：

Kunal 的回答是正确的，但有语法错误，编辑它似乎不起作用。

对于其他人，如果这不起作用，请尝试在vh 中给出高度需要滚动条的组件。

注意：此 CSS 功能是实验性的，不是标准化的，可能仅适用于 Webkit 浏览器。见https://caniuse.com/css-overflow-overlay

.parent {
     overflow: hidden;
}

.child {
     overflow: overlay;
     height: 100vh;
}

【讨论】：

【解决方案7】：

只需添加一个 position: static 到父级。（引导下拉示例）

HTML

<div class="menu px-3">
  <li class="dropdown tab"> <!-- this is one you should add position: static to -->
    <a role="button" data-bs-toggle="dropdown" class="nav-link dropdown-toggle">
    Click to show dropdown<span class="caret"></span>
    </a> 
    <ul class="dropdown-menu show" style="position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate3d(122px, 130px, 0px);" data-popper-placement="bottom-end">
      <li>
        <a href="#" class="dropdown-item text-16 gray-1 tab">
        Link one
        </a>
      </li>
      <li>
        <a href="#" class="dropdown-item text-16 gray-1 tab ">
        Link two
        </a>
      </li>
    </ul>
  </li>
</div>

CSS

div.menu {
  overflow-y: hidden;
  overflow-x: auto;
}
li.dropdown {
  position: static;
}

Please return to this link for more info

【讨论】：