Overflow:hidden

Un détail qui me revient en préparant un montage: cacher ce qui dépasse d'un cadre.

Pour qu'un cadre cache ce qui dépasse de ses dimensions, l'attribut est: overflow:hidden; (traduction: ce qui dépasse est caché); si ce cadre ne contient qu'un seul élément, celui-ci sera caché selon son positionnement

 Par contre, si vous devez placer plusieurs éléments (<div>,<p>) qui, par défaut, vont se placer les uns sous les autres et que vous souhaitez les positionner les uns au dessus des autres, il vous faudra les positionner en indépendant les uns des autres, en position:absolute; et là, overflow:hidden; les laissera apparaître si vous ne positionnez pas le cadre principal en position:absolute; ou en position:relative;  A NE PAS OUBLIER !

<div style="position: relative; width: 40vw; height: 10vw; border: 0.2vh solid black; background: yellow; overflow: hidden;"><input id="bt1" type="text" value="A" /><input id="bt2" type="text" value="B" />
<p id="ex1">page1</p>
<p id="ex2">page2</p>
</div>

<style><!--
#bt1{position:absolute; z-index:5; width:2vw; height:2vw; font-size:1vw; line-height:2vw; text-align:center; transform:translate(37vw,0vw);}
#bt2{position:absolute; z-index:5; width:2vw; height:2vw; font-size:1vw; line-height:2vw; text-align:center; transform:translate(37vw,3vw);}
#ex1{position:absolute; width: 40vw; height: 10vw; background: lime; transform: translate(40vw,0vw); transition:all 1s linear;}
#ex2{position:absolute; width: 40vw; height: 10vw; background: coral; transform: translate(-40vw,0vw); transition:all 1s linear;}
#bt1:focus ~ #ex1,#bt2:focus ~ #ex2{transform:translate(0vw,0vw);}
--></style>