CSS “overflow”属性的“overlay”值的作用是什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43050434/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What is the function of "overlay" value of "overflow" property?
提问by Sridhar
I am unable to understand the difference between "overlay" & "auto". Does "overlay" does the same work as "auto"?
我无法理解“叠加”和“自动”之间的区别。“覆盖”与“自动”的作用相同吗？
回答by UncaughtTypeError
The only difference is that overflow: overlayis only supported by -Webkit browsers, is non-standardized, and allows the content to extend beneath the scrollbar - whereas overflow: autowill not allow the content to extend beneath the scrollbar, if it appears it'll occupy the space required and shift the content accordingly (either vertically or horizontally).
唯一的区别是overflow: overlay仅由 -Webkit 浏览器支持，是非标准化的，并允许内容扩展到滚动条下方 - 而overflow: auto不允许内容扩展到滚动条下方，如果出现它会占用所需的空间并相应地移动内容（垂直或水平）。
p {
display: inline-block;
width: 12em;
height: 5em;
border: dotted;
}
p.overflow-auto { overflow: auto; /* append scrollbars if necessary and shift content accordingly to accommodate */ }
p.overflow-overlay { overflow: overlay; /* append scrollbars if necessary and overlay over/above content */ }<p class="overflow-auto">overflow: auto
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
<p class="overflow-overlay">overflow: overlay
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>The above snippet demonstrates the difference as follows:
上面的代码片段演示了如下差异：
p.overflow-auto { overflow: auto; /* append scrollbars if necessary and shift content accordingly to accommodate */ }
p.overflow-overlay { overflow: overlay; /* append scrollbars if necessary and overlay over/above content */ }
