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

Question

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

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

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

正如您在图片上看到的那样，所需的行为是将红色框放在蓝色框的外面。我已将父元素位置属性设置为 'relative'（蓝色框），将国家代码容器（红色）设置为 'absolute'，但没有帮助。我也试过更改 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;
}

我几乎可以通过将位置设置为 'fixed' 来获得所需的输出，但是当调整页面大小时它停留在其位置时这并不好。

Answer 1

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

Answer 2

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

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

Place element on top of other (Create overlay)

html

javascript

css

styles

overlay