將元素放在其他元素之上（創建疊加層）

Question

我對 HTML 和 CSS 還是有點陌生，需要一些幫助。

我有一個 div，里面有一個電話輸入元素。 輸入使用的庫允許用戶輸入 select 國家代碼。

問題是，當我點擊國家代碼時，它會停留在父 div 中，這不是我想要的。

正如您在圖像上看到的，所需的行為是將紅色框放在藍色框之外。 我已將父元素 position 屬性設置為“相對”（藍色框）並將國家代碼容器（紅色框）設置為“絕對”，但這沒有幫助。 我也嘗試過更改 z-index 沒有運氣。

如圖紅框有如下styles：

.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;
}

我幾乎可以通過將 position 設置為“固定”來獲得所需的 output，但是在調整頁面大小時這並不好，因為它停留在 position 中。

Answer 1

我認為問題出在.drag-container class...刪除溢出：自動或將其更改為溢出：未設置

Answer 2

您可以嘗試使用 select 的 select2.js 插件，它會在 body 元素的末尾創建一個下拉列表，而不管父級的位置如何