What is the function of the overlay value of the overflow property?

Question

I can not understand the difference between "overlay" and "auto". Does Overlay do the same job as Auto?

Answer 1

The only difference is that it is overflow: overlaysupported only by -Webkit browsers, is non-standardized and allows content to expand under the scroll bar - while it overflow: autodoes not allow content to expand under the scroll bar if it seems to take up space and change the content accordingly (vertically or horizontally).

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>

Run codeHide result

:

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