标题重写为：使用z-index在CSS悬停时展示文本，导致div移动
<p>当我悬停在第一个div上以显示完整的文本时，第二个div的位置会改变，以使其位于第一个div的后面。我希望第二个div保持原位，第一个div的文本覆盖它。</p>
<p><strong>演示：</strong>https://codepen.io/adivity/pen/OJEzoPm</p>
<pre class="brush:php;toolbar:false;"><html>
<body>
<div class="container">
<div>1）这是我想要显示的完整标题。它非常长，完全会覆盖下一个div。
</div>
<div>2）这是我想要显示的完整标题。它非常长，完全会覆盖下一个div。
</div>
<div>3）这是我想要显示的完整标题。它非常长，完全会覆盖下一个div。
</div>
</div>
</body>
</html></pre>
<pre class="brush:php;toolbar:false;">.container {
max-width: 100px;
margin: 0 auto;
}
.container div {
height: 80px;
background-color: grey;
}
.container div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.container div:hover {
overflow: visible;
white-space: normal;
z-index: 2;
max-width: 100px;
}</pre></p>
1
726
![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
从
.container div:hover中移除position: absolute对我来说解决了问题。这是你要找的吗？.container div:hover { overflow: visible; white-space: normal; z-index: 2; position: absolute; <---移除这个 max-width: 100px; }