2

我有 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 会显示在它旁边。PapaDivoverflow-y:auto定义了最大高度。

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

这就是这里的困境。我需要两种行为的混合。我需要 ChildDiv 显示在 PapaDiv 之外，同时如果有很多其他孩子在里面显示滚动条。有针对这个的解决方法吗？

编辑：我认为这不会有太大帮助，但这里是 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's 。涉及到 JavaScript。对于这些元素，鼠标悬停在复选框或其标签上时，ChildDiv 会显示 ( jQuery $('.ChildDiv').show())。

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

4

1 回答 1

0

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

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

尝试这个：

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

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

下面的链接是我用来帮助我的帖子：
如何将一个 div 覆盖在另一个 div 上

于 2012-09-18T16:36:30.730 回答