Titre réécrit en : utilisez z-index pour afficher le texte en survol avec CSS, provoquant le déplacement de div
P粉826283529
2023-09-03 20:17:48
<p>Lorsque je survole le premier div pour afficher le texte intégral, la position du deuxième div change pour qu'elle soit derrière le premier div. Je veux que le deuxième div reste en place et que le texte du premier div le couvre. </p>
<p><strong>Démo : </strong>https://codepen.io/adivity/pen/OJEzoPm</p>
<pre class="brush:php;toolbar:false;"><html>
<corps>
<div class="conteneur">
<div>1) C'est le titre complet que je souhaite afficher. C'est très long et couvrira complètement la prochaine division.
</div>
<div>2) C'est le titre complet que je souhaite afficher. C'est très long et couvrira complètement la prochaine division.
</div>
<div>3) C'est le titre complet que je souhaite afficher. C'est très long et couvrira complètement la prochaine division.
</div>
</div>
</corps>
</html></pre>
<pre class="brush:php;toolbar:false;">.container {
largeur maximale : 100 px ;
marge : 0 automatique ;
}
.conteneur div {
hauteur : 80px ;
couleur de fond : gris ;
}
.conteneur div {
espace blanc : nowrap ;
débordement caché;
débordement de texte : points de suspension ;
}
.container div: survol {
débordement : visible ;
espace blanc : normal ;
indice z : 2 ;
largeur maximale : 100 px ;
}</pre></p>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
De
.container div:hover中移除position: absoluteJ'ai résolu le problème pour moi. Est-ce ce que vous recherchez?.container div:hover { overflow: visible; white-space: normal; z-index: 2; position: absolute; <---移除这个 max-width: 100px; }