標題重寫為：使用z-index在CSS懸停時展示文本，導致div移動
P粉826283529
2023-09-03 20:17:48
<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>
從
.container div:hover移除position: absolute對我來說解決了問題。這是你要找的嗎？.container div:hover { overflow: visible; white-space: normal; z-index: 2; position: absolute; <---移除这个 max-width: 100px; }