Css при использовании абсолютной позиции относительно элемента заставляет оба элемента исчезнуть ⇐ CSS

[Anonymous]

Я пытался ввести поисковый запрос под панелью навигации, но когда я использую абсолютное положение относительно моего значка, и значок, и поисковый ввод исчезают. Но если я не отнесу это к относительному, оно появится. Я хочу, чтобы мои поисковые данные появлялись за пределами этой зеленой области.
Я даже пытался сделать некоторый верхний относительный элемент div, но затем поисковые данные прокручивались в зеленую область.
Я думал, что позиция Absolute заставляет элемент выйти из потока. Так почему же в инспекторе он существует, но я его не вижу? Мне нужны данные поиска за пределами зеленой области.
(Извините, что не могу указать значки. Вы можете поместить любое изображение в тег img, чтобы увидеть проблему)
< div class="snippet">

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

* {
margin: 0;
padding: 0;
font-family: "Montserrat", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
color: #ffffff;
overflow-x: hidden;
}

body {
min-height: 100vh;
display: grid;
grid-template-columns: auto;
grid-template-rows: auto 1fr auto;
}

/* Google-fonts icon style (can be changed) */

.material-symbols-rounded {
font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 20;
}

.material-symbols-outlined {
font-variation-settings: "FILL" 0, "wght" 350, "GRAD" 0, "opsz" 20;
}

/* Actual styling starts here */

/* Navbar styling starts */

.header {
background-color: #128d50;
height: 3.0625rem;
}

.nav-container {
padding: 0 11.71875%;
height: 3.0625rem;
display: flex;
flex-wrap: nowrap;
flex-direction: row;
font-size: 1rem;
flex-grow: 1;
justify-content: space-between;
gap: 2rem;
}

.nav-container a {
color: #ffffff;
text-decoration: none;
}

.nav-container a:hover {
text-decoration: underline;
}

.nav-div {
display: flex;
gap: 1.875rem;
align-items: center;
}

.nav-div img {
width: 1.5625rem;
}

.nav-div .search-toggle {
display: flex;
align-items: center;
justify-content: center;
}

/* search animation */

.nav-div .search,
.nav-div .close {
position: absolute;
cursor: pointer;
transition: all 0.3s ease;
}

.search-toggle .close {
opacity: 0;
pointer-events: none;
}

.search-toggle.active-search .close {
opacity: 1;
pointer-events: auto;
}

.search-toggle.active-search .search {
opacity: 0;
pointer-events: none;
}

/* This is the code giving me the problem */

.search-box {
position: relative;
}

.search-box .search-field {
position: absolute;
top: 30px;
right: 20px;
height: 50px;
width: 300px;
}

.search-field input {
height: 100%;
width: 100%;
}

.search-field img {
position: absolute;
}

.nav-container li {
list-style: none;
}

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

[url=#]Home[/url]
[url=#]Library[/url]
[url=#]navigation[/url]
[url=#] Links[/url]
[url=#]Archive[/url]

[url=#]new[/url]


[img]./svg/search.svg[/img]
[img]./svg/close.svg[/img]


[img]./svg/search2.svg[/img]



[url=#]
Login
[/url]

Я просто не могу сделать положение окна поиска относительно поля поиска положение абсолютное. Мне нужны данные поиска за пределами зеленой зоны.

Подробнее здесь: https://stackoverflow.com/questions/790 ... e-items-di