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

考虑一个包含一些内容和垂直滚动条的容器中的autosuggest输入：

当显示autosuggest建议时，它们应显示在内容顶部，而不会影响容器的滚动条

我希望得到：

请注意，滚动条与上述内容完全相同

但是，我得到以下信息：

请注意，滚动条会受到影响，建议也会被删除

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

你将如何解决这个问题

注:

• 滚动容器时，输入和建议应该一起移动
• 您可以修改HTML，但输入和建议列表应位于

  .autosuggest

  内（将

  .autosuggest

  视为第三方组件，其HTML无法更改，但您可以更改其CSS）
• 如果有帮助，可以使用flexbox
• 我正在寻找CSS唯一的解决方案。请不要用Javascript

---

.container{
高度：100px；
宽度：300px；
边缘顶部：50px；
溢出y：自动；
边框：1px纯黑；
}
.自动建议{
位置：相对位置；
宽度：250px；
}
.输入{
字体大小：16px；
宽度：230px；
填充物：5px10px；
边界：0；
背景色：#FFEBBF；
}
.建议{
列表样式类型：无；
保证金：0；
填充物：5px10px；
宽度：230px；
背景色：#85DDFF；
位置：绝对位置；
}
.内容{
宽度：120px；
填充物：5px10px；
}

内容内容内容

建议1
建议2
建议3
建议4
建议5
建议6
建议7
建议8
建议9

内容内容内容

您所要做的就是将z-index属性添加到.autosuggest和.suggestions。这里是codepen的一个代码示例

更新：

我相信这就是你要找的

注意：将鼠标悬停在带有建议的输入上

更新2:

这是新的答案

---

我已经在大多数浏览器（Firefox、Chrome、Opera）中测试过这个答案，所有浏览器的结果都是一样的。（我不确定Safari，因为我无法在我的Windows XP上安装Safari）

为什么不将ul和li元素从div容器中取出，然后通过设置负的顶部位置将建议上移

更新： 更改。自动建议位置：绝对

轻松，卸下

position: relative

从class.autosuggest添加到class.container

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

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

• 当显示autosuggest建议时，它们应该显示在内容的顶部，而不会影响容器的滚动条
• 滚动容器时，输入和建议应该一起移动

这不能只用CSS来完成

要使

建议

显示在

容器

内容的顶部，非剪裁，它必须具有

位置：绝对

，并且它的父级（

自动建议

和

容器

）不能是

位置：相对

缺点是

建议

不会在滚动中移动

要使

建议

与滚动一起移动，其父级（

autosuggest

或

容器

）之一需要是

位置：相对

下面就是，由于

容器

不是

溢出：可见

，它将被剪裁

---

如前所述，并假设

输入必须在
自动建议
元素内，将
自动建议
上的
位置：相对
更改为
位置：绝对
，因此
输入
在滚动时保持
建议
可能是最好的，尽管需要在每个
容器上设置
z-index
，以避免奇数重叠

但如果第三方组件的提供者，…：）。。。，如果可以将
输入
置于
自动建议
元素之外，则可以仅使用CSS对
建议
和
内容
及其布局进行更多控制，这取决于
输入是否有焦点

。。。此示例可能是一个很好的开始（单击
输入
以显示
建议
）


.container{
背景色：白色；
宽度：300px；
最小高度：100px；
边缘顶部：50px；
边框：1px纯黑；
溢出：自动；
位置：相对位置；
}
.自动建议{
位置：相对位置；
宽度：250px；
z指数：1；
}
.输入{
字体大小：16px；
宽度：245px；
填充物：5px10px；
边界：0；
背景色：#FFEBBF；
位置：相对位置；
z指数：1；
}
.建议{
列表样式类型：无；
保证金：0；
填充物：5px10px；
宽度：245px；
背景色：#85DDFF；
显示：无；
}
.内容{
位置：绝对位置；
左：0；
排名：0；
右：0；
底部：0；
填充：35px 10px 5px 10px；
溢出：自动；
z指数：0；
}
输入：focus~.autosuggest.suggestions{
显示：块；
}


建议1
建议2
建议3
建议4
建议5
建议6
建议7
建议8
建议9

内容内容内容
C
.autosuggest {
  position: fixed; /* add position:fixed */
}

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

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

<input>
 content
 content
</input>

suggestion1
suggestion2
suggestion3

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

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