web-dev-qa-db-fra.com

Quelle est la fonction de la valeur "overlay" de la propriété "overflow"?

Je n'arrive pas à comprendre la différence entre "superposition" et "auto". Est-ce que "superposition" fonctionne de la même manière que "auto"?

cssoverflow
15
Sridhar

La seule différence est que overflow: overlay n'est pris en charge que par les navigateurs -Webkit, n'est pas normalisé et permet au contenu de s'étendre sous la barre de défilement - tandis que overflow: auto ne permettra pas au contenu de s'étendre sous la barre de défilement, s'il apparaît, il occupera l'espace requis et décalera le contenu en conséquence (verticalement ou horizontalement).

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>

L'extrait ci-dessus illustre la différence comme suit:

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