html - 如何防止绝对定位的元素影响滚动条？

Question

考虑一个位于容器中的自动提示输入，其中包含一些内容和一个垂直滚动条:

当显示自动建议时，它们应该出现在内容的顶部而不影响容器的滚动条。

我希望得到:

注意滚动条和上面完全一样

但是，我得到以下信息:

请注意，滚动条受到影响，建议被剪切。

为什么绝对定位建议会影响容器的滚动条？

你会如何解决这个问题？

Playground here

注意事项:

• 滚动容器时，输入和建议应该一起移动。
• 您可以修改 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>

Answer 1

• When autosuggest suggestions are shown, they should appear on top of the content without affecting container's scrollbar.
• When scrolling the container, the input and suggestions should move together.

这不能只用 CSS 来完成。

要让 suggestions 出现在 container 内容的顶部，不被剪裁，它必须有 position: absolute 并且没有它的父级(autosuggest 和 container)可以是 position: relative。

缺点是建议不会在滚动时移动。

要使建议随滚动一起移动，其父项之一(autosuggest 或container)需要是position: relative.

这样做的缺点是，由于 container 不是 overflow: visible，它会被剪掉

---

如前所述，并假设 input 必须在 autosuggest 元素内，更改 上的 position: relative autosuggest 到 position: absolute，所以 input 在滚动时与 suggestions 保持一致，这可能是最好的，尽管设置 z-index 每个 container 都需要避免奇怪的重叠。

但是如果第三方组件的提供者，... :) ...，可以转换成一个版本，其中input可以放在autosuggest 元素，可以仅使用 CSS 对 suggestions 和 content 及其布局进行更多控制，基于 if input 是否有焦点，...

...此示例可能是一个好的开始(单击输入以显示建议)。

.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>