Как предотвратить перемещение элементов переменной высоты в другие элементы?

Question

HTML:

<div id="autocomplete" hidden></div>
<input type = "button" id = "search" value = "Search">

Блок автозаполнения содержит различные входные теги, сгенерированные jQuery. Когда теги ввода созданы, они сдвигают кнопку вниз по экрану, чтобы подогнать содержимое автозаполнения. То, что я хочу сделать, это иметь наложение кнопки автозаполнения div поверх кнопки, а не сдвигать кнопку вниз.

Я попытался использовать z-index, но, похоже, он работает, только если автозаполнение помещено после кнопка в HTML, использующая отрицательное поле для смещения автозаполнения обратно вверх. Мне не нравится это решение, потому что оно портится при просмотре с других размеров экрана.

Есть ли другой способ?

Answer 1

Я думаю, что вы должны использовать absolute позиционирование, чтобы удерживать кнопку над элементами вставки.

Вы можете сделать что-то вроде этого:

$('#autocomplete').append($('<div>').text('WOW1'))
$('#autocomplete').append($('<div>').text('WOW2'))
$('#autocomplete').append($('<div>').text('WOW3'))
$('#autocomplete').append($('<div>').text('WOW4'))

#container {
  position: relative;
}

#search {
 position: absolute;
 top: 0;
}

#autocomplete {
  padding-top: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="container">
  <div id="autocomplete" ></div>
  <input type = "button" id = "search" value = "Search">
</div>

РЕДАКТИРОВАТЬ:

Вот ссылка, чтобы увидеть, как работает CSS позиция: https://developer.mozilla.org/en-US/docs/Web/CSS/position

Также я рекомендую вам проверить этот ответ о переполнении стека относительно относительного и абсолютного позиционирования, у него очень естественный ответ ( Относительное положение относительно абсолютного? )

Это говорит браузеру, что все, что будет позиционироваться, должно быть удалено из обычного потока документа и будет размещено в точном месте на странице. Это не повлияет на то, как элементы до или после него в HTML будут размещены на веб-странице, однако будет зависеть от расположения родителей, если вы не переопределите его.

Answer 2

Это общий метод, чтобы элементы внутри div автозаполнения не влияли на поток других элементов на странице (в данном случае, ваша кнопка).

#autocomplete {
  position: relative;
}

#autocomplete > * {
  position: absolute;
}

Несколько комментариев, чтобы улучшить это код:

• Не используйте идентификаторы (#) на вашем css. Лучше придерживаться имен классов.
• Не используйте подстановочный знак (*) - желательно добавить элементы, которые будут находиться внутри автозаполнения, которые не показаны в вопросе. А еще лучше, оберните их все в другой элемент, чтобы вам не приходилось помещать их все в абсолютное положение