"オーバーフロー"プロパティの "オーバーレイ"値の機能は何ですか？

Question

"オーバーレイ" & "auto"の違いを理解できません。 「オーバーレイ」は「自動」と同じ作業をしますか？

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