Как сделать div той же ширины, что и элемент над ним БЕЗ использования относительного позиционирования? ⇐ CSS

[Anonymous]

У меня есть форма, в которой я пытаюсь настроить раскрывающееся меню под полем ввода.
Моя проблема в том, что я не могу сделать раскрывающееся меню одинаковой ширины. в качестве поля ввода над ним.
Если я настраиваю раскрывающееся меню на использование относительного позиционирования и устанавливаю его на 75 % (такая же ширина, как у поля ввода), тогда оно работает. Но тогда проблема заключается в том, что раскрывающееся меню смещает вниз элементы под ним, когда оно расширяется, а это не то, чего я хочу. Я хочу, чтобы при расширении он накладывался на элементы ниже него.
Поэтому, когда я устанавливаю раскрывающийся элемент div на использование относительного позиционирования, ширина в порядке, но затем он смещает элементы вниз, что я и делаю. не хочу. Но затем, когда я настраиваю его на использование фиксированного позиционирования, он перекрывает элементы под ним (это то, что я хочу), но тогда я не могу добиться той же ширины, что и входные данные над ним.
Как мне сделать так, чтобы этот раскрывающийся элемент div ОБА перекрывал элементы под ним, когда он расширяется, и ТАКЖЕ имел ту же ширину, что и поле ввода над ним?
Спасибо за ваше время и благослови Господь.
здесь — это ссылка на раскрывающийся элемент div и поле ввода над ним.

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

const input = document.getElementById("bizcategory");
const listContainer = document.getElementById("myList");

const words = ['option5', 'option6', 'option7', 'option8',
'option9', 'option10', 'option11'
];

for (let i = 0; i < words.length; i++) {
const newItem = document.createElement("li");
newItem.textContent = words[i];
newItem.style.listStyle = "none";
listContainer.appendChild(newItem);

}

const listItems = listContainer.querySelectorAll("li");

input.addEventListener("focus", () => {
listContainer.style.display = "block";
})

input.addEventListener("blur", () => {
setTimeout(() => {
listContainer.style.display = "none";
}, 200);
});

listItems.forEach(i => i.addEventListener("click", function() {
input.value = i.textContent;
listContainer.style.display = "none";
}));

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

.signininput {
height: 40px;
width: 75%;
box-sizing: border-box;
}

.list-container {
display: none;
border: 1px solid #ccc;
background-color: white;
width: 75%;
}

.list-container ul {
list-style: none;
padding: 0;
margin: 0;
width: 75%;
}

.list-container li {
padding: 5px;
}

.list-container li:hover {
background-color: #f0f0f0;
cursor: pointer;
}

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

[list]
[*]Option 1
[*]Option 2
[*]Option 3
[*]Option 4
[/list]

Подробнее здесь: https://stackoverflow.com/questions/793 ... g-relative