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外面显示，同时其他孩子在里面显示滚动条，如果有很多。有解决方案吗？

编辑：我认为这不会有太大帮助，但这里是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设置“顶部”和“左”属性，使其出现在其复选框旁边。 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

溢出自动和可见的混合行为

1 个答案: