Title rewritten to: Use z-index to display text on hover with CSS, causing div to move
P粉826283529
2023-09-03 20:17:48
<p>When I hover over the first div to display the full text, the position of the second div changes so that it is behind the first div. I want the second div to stay in place and the first div's text to cover it. </p>
<p><strong>Demo: </strong>https://codepen.io/adivity/pen/OJEzoPm</p>
<pre class="brush:php;toolbar:false;"><html>
<body>
<div class="container">
<div>1) This is the full title I want to display. It's very long and will completely cover the next div.
</div>
<div>2) This is the full title I want to display. It's very long and will completely cover the next div.
</div>
<div>3) This is the full title I want to display. It's very long and will completely cover the next 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: gray;
}
.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>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Removing
position: absolutefrom.container div:hoversolved the problem for me. Is this what you are looking for?.container div:hover { overflow: visible; white-space: normal; z-index: 2; position: absolute; <---移除这个 max-width: 100px; }