0

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

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

2
  • cloud.mail.ru/public/Kvbf/ypzcNw5nU не сбоку
    – user33274
    29 июл 2016 в 12:31
  • 1
    элементу, который будет выпадать, ставишь position: absolute, а его родителю position: relative. тогда он будет позиционироваться всегда относительно родителя. и там уже свойствами left и top позиционируй
    – lexxl
    29 июл 2016 в 12:33

2 ответа 2

2
.shop-search{
position: relative;
}

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

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>

Вот как-то так :)

 .Parent { 
    position:relative;
 }

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.