Как помешать абсолютно позиционируемому элементу повлиять на полосу прокрутки?

Рассмотрим вход с автоматической записью, сидящий в контейнере с некоторым содержимым и вертикальной полосой прокрутки:

Когда отображаются предложения с автозагрузкой, они должны отображаться поверх содержимого , не затрагивая панель прокрутки контейнера.

Я ожидаю получить:

Обратите внимание, что полоса прокрутки точно такая же, как указано выше.

Но я получаю следующее:

Обратите внимание, что на полосу прокрутки влияет, а рекомендации вырезаны.

Почему абсолютно позитивные предложения влияют на панель прокрутки контейнера?

Как вы это исправите?

Игровая площадка здесь

Примечания:

При прокрутке контейнера вход и предложения должны перемещаться вместе.
Вам разрешено изменять 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>

Ответы

Ответ 1

Это кажется немного сумасшедшим подходом и имеет небольшое оговорку, но это чистая модификация структуры CSS/no HTML.

По существу, я делаю .container основным родителем вместо того, чтобы пытаться работать с более низкого уровня (.autosuggest). Шаг за шагом:

Переместить position: relative до .container
Сделайте .autosuggest позиционированным абсолютно (верхний/левый по умолчанию - 0px).
- Дайте ему более высокий индекс z, поэтому он всегда сверху
make .content позиционируется абсолютно все четыре стороны 0px, поэтому он имеет тот же размер, что и .container
Переместите панель прокрутки переполнения в .content div
(здесь предостережение) Установите верхнее дополнение .content на высоту .input + на самом деле требуемое заполнение. В противном случае .content находится за элементом ввода.

И вы закончите с этим:

    .container {
      height: 100px;
      width: 300px;
      margin-top: 50px;
      border: 1px solid black;
      position: relative;
    }
    .autosuggest {
      width: 250px;
      position: absolute;
      z-index: 50;
    }
    .input {
      font-size: 16px;
      width: 230px;
      padding: 5px 10px;
      border: 0;
      background-color: #FFEBBF;
    }
    .autosuggest .input:focus ~ .suggestions{
      display: block;
    }
    .suggestions {
      display: none;
      list-style-type: none;
      margin: 0;
      padding: 5px 10px;
      width: 230px;
      background-color: #85DDFF;
    }
    .content {
      overflow-y: auto;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      padding: 28px 10px 5px;
    }

<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<br >content content content content content<br ><br ><br ><br ><br ><br >content content content
  </div>
</div>

Ответ 2

Когда отображаются предложения автозавершения, они должны отображаться поверх содержимого, не затрагивая панель прокрутки контейнера.

При прокрутке контейнера вход и предложения должны перемещаться вместе.

Это невозможно сделать только с помощью CSS.

Чтобы suggestions отображался поверх содержимого container, не обрезанный, он должен иметь position: absolute, и ни один из его родителей (autosuggest и container) не может быть position: relative.

Нижняя сторона - это то, что suggestions не будет перемещаться по прокрутке.

Чтобы suggestions перемещаться со свитком, один из его родителей (autosuggest или container) должен быть position: relative.

Нижняя сторона с этим равна, а поскольку container не overflow: visible, она будет обрезана

Как уже было сказано, предполагается, что input должен находиться внутри элемента autosuggest, меняя position: relative на autosuggest на position: absolute, поэтому input остается с suggestions на прокрутке, вероятно, будет лучшим, хотя установка z-index для каждого container понадобится, чтобы избежать нечетного перекрытия.

Но если провайдер стороннего компонента,...:)..., можно было бы поговорить с версией, где input можно было бы разместить вне элемента autosuggest, можно было бы получить некоторый контроль, используя только CSS, и suggestions и content, и их макеты, основанные на том, что если input имеет фокус или нет,...

... где этот пример может быть хорошим началом (нажмите input, чтобы показать suggestions).

.container {
  background-color: white;
  width: 300px;
  min-height: 100px;
  margin-top: 50px;
  border: 1px solid black;
  overflow: auto;
  position: relative;
}
.autosuggest {
  position: relative;
  width: 250px;
  z-index: 1;
}
.input {
  font-size: 16px;
  width: 245px;
  padding: 5px 10px;
  border: 0;
  background-color: #FFEBBF;
  position: relative;
  z-index: 1;
}
.suggestions {
  list-style-type: none;
  margin: 0;
  padding: 5px 10px;
  width: 245px;
  background-color: #85DDFF;
  display: none;
}
.content {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  padding: 35px 10px 5px 10px;
  overflow: auto;
  z-index: 0;
}
input:focus ~ .autosuggest .suggestions {
  display: block;
}

<div class="container">
  <input class="input" type="text" value="input">
  <div class="autosuggest">
    <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
    content content content content content content content content content content
    content content content content content content content content content content
    content content content content content content content content content content
    content content content content content content content content content content
    content content content content content content content content content content
  </div>
</div>

<div class="container">
  <input class="input" type="text" value="input">
  <div class="autosuggest">
    <ul class="suggestions">
      <li>suggestion 1</li>
      <li>suggestion 2</li>
      <li>suggestion 3</li>
      <li>suggestion 4</li>
      <li>suggestion 5</li>
    </ul>
  </div>
  <div class="content">
    content content content content content content content content content content
    content content content content content content content content content content
    content content content content content content content content content content
  </div>
</div>

Ответ 3

Все, что вам нужно сделать, это добавить свойства z-index в .autosuggest и .suggestions здесь, это пример кода из codepen

http://codepen.io/HTMLNoob/pen/EPEXKN

.autosuggest {
  z-index: -10;
  width: 250px;
}
.suggestions {
  list-style-type: none;
  margin: 0;
  padding: 5px 10px;
  width: 230px;
  background-color: #85DDFF;
  position: absolute;
  z-index: 10;
}

UPDATE:

Я считаю, что это то, что вы ищете

http://jsbin.com/fegibaboyo/1/edit?html,css,output

Примечание. Наведите указатель мыши на ввод с предложениями.

UPDATE2:

http://jsbin.com/mojopuboku/edit?html,css,output

Вот новый ответ.

Я тестировал этот ответ в большинстве браузеров (Firefox, Chrome, Opera), и все они выполняют те же результаты. (Я не уверен в Safari, потому что я не могу установить Safari на своей Windows XP)

Ответ 4

.autosuggest {
  position: fixed; /* add position:fixed */
}

.suggestions {
 /* remove position:absolute */
}

Ответ 5

Почему бы просто не вытащить элементы ul и li из контейнера div, а затем переместить предложения вверх, установив отрицательную верхнюю позицию?

http://jsbin.com/ficalu/edit?html,css,output

Обновление: Изменить .autosuggest to position: absolute

http://jsbin.com/gezimi/edit?html,css,output

Ответ 6

Легко, удалите

position: relative

из класса .autosuggest и добавить в класс .container

Ответ 7

Добавьте это в свой CSS:

.input:focus + .suggestions {
  position: fixed;
  display: block;
}

И добавьте display: none; в .suggestions в свой CSS.

Fiddle здесь.

Ответ 8

Как насчет этого:

переместить autosuggest внешний контейнер
предоставить контент с таким же значением, как высота ввода (если вы используете LESS/SASS, вы должны иметь возможность вычислить это)
отбросить автозагрузку вниз, чтобы занять свободное пространство.

Мои изменения в CSS содержат рядом с ними комментарий. Обратите внимание, что это было протестировано только в Chrome. Возможно, вы также можете немного оптимизировать HTML-код, например удалить контейнер в примере, но у вас, вероятно, есть несколько элементов.

HTML:

  <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="container">
    <div class="content">
      content content content content content content content content content content
    </div>
  </div>

CSS:

.container {
  height: 100px;
  width: 300px;
  overflow-y: auto;
  border: 1px solid black;
}
.autosuggest {
  position: relative;
  top:29px; /* height of input */
  left:1px; /* width of container border */
  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;
  margin-top: 29px; /* height of input */
  padding: 5px 10px;
}

Ответ 9

вы можете сделать его только в стиле "css only", только если предложение 1,2,3 элемента не будет дочерним элементом "ввода".

например:

<input>
 content
 content
</input>

suggestion1
suggestion2
suggestion3

или как рабочий пример, предложите htmlnoob url в некотором верхнем беспорядке

другое исправление, может работать только в старых браузерах, например ie5.