Не работает position relative

341

10 декабря 2016, 10:42

Есть такая разметка

.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. Пример на этом сайте. В поиск вбейте "полотенце" и увидите слева выпадающий блок

Answer 1

.shop-search{
position: relative;
}

Теперь может позиционировать выпадающее окно относительно .shop-search

Answer 2

Задать блоку Parent свойство position:relative, тогда все внутренние элементы будут позиционироваться относительно его.

<div class="shop-search">
  <div class="Parent">
    <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>