"溢出"属性的"叠加"值的功能是什么？

Question

我无法理解"叠加"和"自动"之间的区别."叠加"是否与"自动"完成相同的工作？

Answer 1

唯一的区别是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>

上面的代码段演示了如下差异:

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 */ }