What is the function of “overlay” value of “overflow” property? [duplicate]

问题:

This question already has an answer here:

• Overflow: overlay doesn't work in firefox 1 answer

I am unable to understand the difference between "overlay" & "auto". Does "overlay" does the same work as "auto"?

回答1:

The only difference is that overflow: overlay is only supported by -Webkit browsers, is non-standardized, and allows the content to extend beneath the scrollbar - whereas overflow: auto will 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).

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

文章来源: What is the function of “overlay” value of “overflow” property? [duplicate]