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

}

• suggestion 1
• suggestion 2
• suggestion 3
• suggestion 4
• suggestion 5
• suggestion 6
• suggestion 7
• suggestion 8
• suggestion 9

content content
content content content content content
content content content

我还添加了一些显示/隐藏的autosuggest框，因为它看起来不错。

.autosuggest .input:focus ~ .suggestions{

display: block;

}

.suggestions {

display: none;

}

已测试FF 43，Chrome 47

When scrolling the container, the input and suggestions should move together.

这很可能需要JavaScript。根据定义，将建议设置为绝对位置会将其从内容流的其余部分中删除。你可以在.suggestions div上设置一个高度，并单独滚动它，但是滚动不能(据我所知)被绑定到.content滚动，如果它定位绝对(再次，使用CSS单独)。

就像是：

$('.content').on('scroll', function () {

$('.autosuggest .suggestions').scrollTop($(this).scrollTop());

});

Why absolutely positioned suggestions affect container’s scrollbar?

从技术上讲，绝对定位的元素不影响父的高度。然而，它们仍然被视为元素的内容 – 内容溢出(至少在这种情况下)。

The overflow property specifies whether to clip content, render scrollbars or just display content when it overflows its block level container. (07001)

因为.container的溢出设置为滚动，它显示一个滚动条，因为它的一个孩子溢出边界框。如果将溢出更改为隐藏，它将隐藏所有扩展内容并设置为可见，您将看到.autosuggest扩展通过.container，但.content也是如此(因为它也是扩展边界框的内容)。

你看到一个滚动条，因为.suggest内容视觉上延伸到.container块之外，即使它是绝对定位的。