将元素放在其他元素之上（创建叠加层）答案

【问题标题】：Place element on top of other (Create overlay)将元素放在其他元素之上（创建叠加层）
【发布时间】：2021-07-20 13:10:55
【问题描述】：

我对 HTML 和 CSS 还是有点陌生，需要一些帮助。

我有一个 div，里面有一个电话输入元素。输入使用了一个允许用户选择国家代码的库。

问题是，当我点击国家代码时，它停留在父 div 中，这不是我想要的。

正如您在图片中看到的，所需的行为是将红色框放在蓝色框之外。我已将父元素位置属性设置为“相对”（蓝色框），将国家代码容器（红色）设置为“绝对”，但这没有帮助。我也尝试过更改 z-index，但没有运气。

图中红框有以下几种样式：

.iti__country-list {
position: absolute;
z-index: 2;
list-style: none;
text-align: left;
padding: 0;
margin: 0 0 0 -1px;
box-shadow: 1px 1px 4px rgb(0 0 0 / 20%);
background-color: white;
border: 1px solid #CCC;
white-space: nowrap;
max-height: 200px;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}

还有蓝色的：

.drag-container {
display: grid;
max-height: 600px;
overflow-y: auto;
padding: 10px;
position: relative;
}

我几乎可以通过将位置设置为“固定”来获得所需的输出，但是在调整页面大小时效果不佳，因为它保持在原来的位置。

【问题讨论】：

标签： javascript html css styles overlay

【解决方案1】：

您可以尝试使用 select2.js 插件进行选择，它会在 body 元素的末尾创建一个下拉列表，而不管父元素的位置如何

【讨论】：

【解决方案2】：

我认为问题出在 .drag-container 类中...删除 overflow:auto 或将其更改为 overflow:unset

【讨论】：

谢谢。就是这样。我知道这很简单