Рассмотрим вход с автоматической записью, сидящий в контейнере с некоторым содержимым и вертикальной полосой прокрутки:
Когда отображаются предложения с автозагрузкой, они должны отображаться поверх содержимого , не затрагивая панель прокрутки контейнера.
Я ожидаю получить:
Обратите внимание, что полоса прокрутки точно такая же, как указано выше.
Но я получаю следующее:
Обратите внимание, что на полосу прокрутки влияет, а рекомендации вырезаны.
Почему абсолютно позитивные предложения влияют на панель прокрутки контейнера?
Как вы это исправите?
Примечания:
- При прокрутке контейнера вход и предложения должны перемещаться вместе.
- Вам разрешено изменять HTML-код, но список ввода и списка предложений должен оставаться внутри
.autosuggest
(рассмотрите.autosuggest
как сторонний компонент, HTML-код которого нельзя изменить, но вы можете изменить его CSS). - Вы можете использовать flexbox, если это поможет.
- Я ищу решение только для CSS. Нет Javascript, пожалуйста.
.container {
height: 100px;
width: 300px;
margin-top: 50px;
overflow-y: auto;
border: 1px solid black;
}
.autosuggest {
position: relative;
width: 250px;
}
.input {
font-size: 16px;
width: 230px;
padding: 5px 10px;
border: 0;
background-color: #FFEBBF;
}
.suggestions {
list-style-type: none;
margin: 0;
padding: 5px 10px;
width: 230px;
background-color: #85DDFF;
position: absolute;
}
.content {
width: 120px;
padding: 5px 10px;
}
<div class="container">
<div class="autosuggest">
<input class="input" type="text" value="input">
</div>
<div class="content">
content content content content content content content content content content
</div>
</div>
<div class="container">
<div class="autosuggest">
<input class="input" type="text" value="input">
<ul class="suggestions">
<li>suggestion 1</li>
<li>suggestion 2</li>
<li>suggestion 3</li>
<li>suggestion 4</li>
<li>suggestion 5</li>
<li>suggestion 6</li>
<li>suggestion 7</li>
<li>suggestion 8</li>
<li>suggestion 9</li>
</ul>
</div>
<div class="content">
content content content content content content content content content content
</div>
</div>