html - overflow auto 和 visible 的混合行为

Question

我有 HTML 结构

<div class="PapaDiv">
  <input type="checkbox"/>
  <label></label>
  <div class="ChildDiv">
    <input type="radio"/><label></label>
    <input type="radio"/><label></label>
    <input type="radio"/><label></label>
  </div>
  <br/>
</div>

这个动物是根据数据在服务器端动态构建的。这有点像嵌套菜单。当用户将鼠标悬停在带有标签的复选框上时，ChildDiv 会显示在它旁边。 PapaDiv 定义了 overflow-y:auto 和最大高度。

所以，如果有很多复选框，PapaDiv 会得到一个垂直滚动条。这是想要的行为。现在，如果您将鼠标悬停在底部的复选框上，它的 ChildDiv 也会显示在 PapaDiv 中 (overflow-y:auto)。公司希望它显示在 PapaDiv 之上，为此我必须设置 overflow-y:visible。

这就是这里的困境。我需要两种行为的混合。我需要 ChildDiv 显示在 PapaDiv 之外，同时其他 child 在内部显示滚动条(如果有很多)。有解决办法吗？

编辑:我认为这不会有太大帮助，但这是 CSS:

.ChildDiv{
    background-color: #EDF1F9;
    border: 1px solid #557AB5;
    display: none;
    max-height: 200px;
    overflow-y: auto;
    padding: 10px;
    position: absolute;
}

.PapaDiv{
    background-color: #FFFFFF;
    border: 1px solid #557AB5;
    box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.3);
    left: 0;
    max-height: 300px;
    overflow-y: auto;
    padding: 0.5em;
    position: absolute;
    top: 0;
    width: 98%;
    z-index: 501;
}

PapaDiv's parent div {
    position: relative;
    width: 100%;
}

编辑:没有显示的原因是因为 CSS 中有 display:none。涉及 JavaScript。对于这些元素，当鼠标悬停在复选框或其标签上时，会显示 ChildDiv (jQuery $('.ChildDiv').show())。

从 ChildDiv 或 PapaDiv 鼠标移出时:$('.ChildDiv').hide()。此外，还有一个简单的计算涉及为 ChildDiv 设置“top”和“left”属性，因此它出现在其复选框旁边。 ChildDiv 已使用 position:absolute; 定义。

Answer 1

我在 Dimskiy 之前也遇到过同样的问题。我试图创建一个放大镜，当鼠标悬停在图像上时它会出现在图像上方。我发现父 div，在本例中 #PapaDiv 必须相对定位，而子 div，在本例中 #ChildDiv 必须绝对定位。

我看到 #PapaDiv 的父级相对定位，但如果我记得，我必须相对定位子元素的直接父级。

试试这个:

#PapaDiv {
    position: relative;
}
#ChildDiv {
    position: absolute;
}

当然，您也可以在其中添加所有其他额外的 CSS。

下面的链接是我用来帮助我的帖子:
How to overlay one div over another div