html消除绝对定位的影响,html – 如何防止绝对定位的元素影响滚动条？

这似乎有点janky的方法和有一个小警告，但它是纯CSS /没有HTML结构修改。

基本上，我使.container是主要的父，而不是试图从较低级别(.autosuggest)工作。一步步：

>移动位置：相对于.container

>使.autosuggest绝对定位(上/左默认为0px)。

>给它一个更高的z-index，所以它总是在顶部

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