“溢出”属性的“覆盖”值的作用是什么？ [复制]

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>

上面的sn-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 */ }