Есть такая разметка
.blockSearchFastResult {
position: absolute;
left: 0px;
right: 0px;
border: #1393d9 solid 3px;
padding: 10px;
z-index: 100;
background: white;
margin-top: 10px;
font-size: 9pt;
border-radius: 6px;
display: none;
width: 484px;
}
<div class="shop-search">
<div>
<form action="#" method="post" class="shop-search-form blockSearch">
<label class="search-form-label">
<input type="text" class="search-form-input" placeholder="Поиск по товарам">
<button type="submit" class="search-form-icon" title="Поиск"></button>
</label>
</form>
<div class="blockSearchFastResult">
123
</div>
</div>
</div>
Хотелось бы реализовать выпадающее окна после введения букв. Техническая часть работает нормально, но вот блок blockSearchFastResult
выпадает в самом углу, и настроить не получается, т.к. при каждом расширении будет выглядить по разному.
Как сделать так что бы этот блок открывался прям под формой с z-index: 100
. Пример на этом сайте. В поиск вбейте "полотенце" и увидите слева выпадающий блок
absolute
, а его родителюposition: relative
. тогда он будет позиционироваться всегда относительно родителя. и там уже свойствамиleft
иtop
позиционируй