html - 当我们在css中使用 'overflow'时如何将盒子带到父div之外

Question

我为父 div (#trreWrapdiv) 使用了 CSS 属性“溢出”。当我向下单击三 Angular 形(zone2 上的黑色)时，带有复选标记的框应该完全显示，但事实并非如此。

我的目标:我应该为父 div 使用“溢出”。带勾的框也应该完整显示(但是，它被部分隐藏了)

现在

这应该是(我不应该删除父“div”的“overlow”，我的意思是标题为“设备”的框)

CSS

#treeWrapDiv {
    border: 3px solid red;
    overflow-x: hidden;
    overflow-y: auto;
}

.dropdown-menu {
    background-clip: padding-box;
    background-color: #fff;
    border: 2px solid red;
    border-radius: 4px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
    display: none;
    float: left;
    font-size: 14px;
    left: 0;
    list-style: outside none none;
    margin: 2px 0 0;
    min-width: 160px;
    padding: 5px 0;
    position: absolute;
    text-align: left;
    top: 100%;
    z-index: 1000;
}

请问有什么帮助或建议吗？

Answer 1

您可以使用 overflow-x: visible; 实现这一点，但据我所知，您希望此包装器可滚动 - 您得到了 overflow-y: auto; -但是您不能同时拥有可滚动框和在此框外可见的内容。

解决方案是将 .dropdown-menu 元素放置在容器之外，并将其绝对相对于例如正文 使用 javascript。