Почему моя позиция: абсолютный элемент не отображается над моим телом? ⇐ Html

[Anonymous]

Код: Выделить всё

/* Main Content Styling */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', serif;
}

body {
background-color: var(--primary-color);
height: 100vh;
padding: 8rem 1rem;
}

body .container {
background: var(--white-color);
border-radius: 0.5rem;
box-shadow: 0 0 20px var(--shadow-color);
margin: 0 auto;
width: 420px;
}

/* Tasks Section Styling */
.container .tasks-list {
padding: 1.5rem 1.5rem 5rem 1.5rem;
display: flex;
flex-direction: column;
gap: 1rem;
max-height: 500px;
overflow-y: auto;
scrollbar-width: thin;
}

.task .task-right button {
border: none;
background: none;
font-size: 1.2rem;
cursor: pointer;
}

.task-right .edit-popup {
background: var(--white-color);
box-shadow: 0 0 5px var(--shadow-color);
list-style: none;
position: absolute;
padding: 0.5rem;
border-radius: 0.3rem;
/* padding: 0.5rem;
border-radius: 0.3rem;
z-index: 10;
position: absolute;
top: 2rem;
right: 0;
display: flex;
flex-direction: column;
gap: 0.2rem; */
}

.task-right .edit-popup i {
/* font-style: normal;
cursor: pointer;
padding-right: 0.5rem; */
}

Код: Выделить всё

[i]
Testing


[/i]
[list]
[*][i][/i]Edit
[*][i][/i]Delete
[/list]

(отредактированная версия)
У меня есть этот CSS и этот HTML здесь, которые должны отображать список дел с задачами внутри него. У каждой задачи есть кнопка настроек, и предполагается, что она отображает небольшой список с вариантами настроек. Тем не менее, позиция списка является абсолютной, но она все равно обрезается, когда выходит за пределы ширины/высоты основного контейнера.
Я попробовал установить z-индекс тела ниже, чем у элемента, и это ничего не изменило. Я также попробовал установить значение «Нет» для фона элемента body, но это не сработало.

Подробнее здесь: https://stackoverflow.com/questions/794 ... er-my-body