Texte developpé premier plan

Texte developpé premier plan

Dans un village, le vieux curé, ne voulait plus entendre les femmes lui dire qu'elles avaient trompé leur mari.
Si bien que lorsqu'elles trompaient leur mari, il fallait qu'elles disent : - " Monsieur le curé, je suis tombée dans le lavoir. "
Un jour, le vieux curé voit arriver son remplaçant, un jeune prête.
Il le met au courant de la vie dans le village, le présente aux notoriétés et arrive le jour de confesse.
Une phrase revenait souvent :
- " Monsieur le curé, je suis tombée dans le lavoir ".
Au bout de quelques semaines, le jeune prête va voir le maire, pour qu'il fasse faire de suite des travaux au lavoir, pour arrêter tous ces accidents récurrents.
Le maire étant au courant de la fameuse phrase, lui tape sur l'épaule et le rassure en lui disant que ce n'est pas bien grave, et qu'il n'y a jamais eu de blessées.
Le jeune curé, lui répond :
- " A votre place, je ferai rapidement les travaux car votre femme est tombée trois fois dedans la semaine dernière. "

Votre article du dessous, avec ce que vous voulez.
Le principe est de positionner chaque cadre en indépendant, l'un sous l'autre de façon à ce que l'agrandissement de celui du dessus ne touche pas à celui du dessous: position:absolute;.
Il faut donner une position en profondeur pour chacun d'eux: celui du dessus sera au premier plan par z-index:5; et celui du dessous sera en fond par z-index:1;

<div style="height: 70vh;">
<div style="width: 90vw; height: 50vh; position: absolute; z-index: 5; transform: translate(0vw,0vh);"><input id="f1" type="text" value="Cliquez cette partie" />
<p id="f2">Dans un village, le vieux curé, ne voulait plus entendre les femmes lui dire qu'elles avaient trompé leur mari.<br /> Si bien que lorsqu'elles trompaient leur mari, il fallait qu'elles disent : - " Monsieur le curé, je suis tombée dans le lavoir. "<br /> Un jour, le vieux curé voit arriver son remplaçant, un jeune prête.<br /> Il le met au courant de la vie dans le village, le présente aux notoriétés et arrive le jour de confesse.<br /> Une phrase revenait souvent :<br /> - " Monsieur le curé, je suis tombée dans le lavoir ".<br /> Au bout de quelques semaines, le jeune prête va voir le maire, pour qu'il fasse faire de suite des travaux au lavoir, pour arrêter tous ces accidents récurrents.<br /> Le maire étant au courant de la fameuse phrase, lui tape sur l'épaule et le rassure en lui disant que ce n'est pas bien grave, et qu'il n'y a jamais eu de blessées.<br /> Le jeune curé, lui répond :<br /> - " A votre place, je ferai rapidement les travaux car votre femme est tombée trois fois dedans la semaine dernière. "</p>
<input id="ff" type="text" value="X" /></div>
<div style="width: 85vw; height: 30vh; position: absolute; z-index: 1; transform: translate(0vw,10vh); text-align: center; background: url('http://ekladata.com/V6-SOjH6KiDBOKKtx3Ldp6GkV6s/bricks5.jpg'); border: 0.2vw solid brown;">Votre article du dessous, avec ce que vous voulez.<br />Le principe est de positionner chaque cadre en indépendant, l'un sous l'autre de façon à ce que l'agrandissement de celui du dessus ne touche pas à celui du dessous: position:absolute;.<br />Il faut donner une position en profondeur pour chacun d'eux: celui du dessus sera au premier plan par z-index:5; et celui du dessous sera en fond par z-index:1;</div>
</div>

<style></style>