使用 z-index 悬停时显示的 CSS 文本导致 div 移动答案

【问题标题】：CSS text reveal on hover with z-index is causing divs to move使用 z-index 悬停时显示的 CSS 文本导致 div 移动
【发布时间】：2022-11-21 12:40:10
【问题描述】：

当我将鼠标悬停在第一个 div 上以显示全文时，第二个 div 的位置会更改为位于第一个 div 之后。我需要第二个 div 保留在原处，第一个 div 的文本与它重叠。

演示：https://codepen.io/adivity/pen/OJEzoPm

<html>
<body>
  <div class="container">
    <div>1) This is the full title that I want to be revealed. That is super duper long and totally will overlap the next div.
    </div>
    <div>2) This is the full title that I want to be revealed. That is super duper long and totally will overlap the next div.
    </div>
    <div>3) This is the full title that I want to be revealed. That is super duper long and totally will overlap the next div.
    </div>
  </div>
</body>
</html>

.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;
 }

【问题讨论】：

为什么会有一个随机的position: absolute;？

标签： html css z-index

【解决方案1】：

从 .container div:hover 中删除 position: absolute 为我解决了这个问题。那是你要找的吗？

.container div:hover {
  overflow: visible;
  white-space: normal;
  z-index: 2;
  position: absolute; <---remove this
  max-width: 100px;
}

【讨论】：

哎呀，在代码笔中，我缩短了标题以使其更清楚，但是标题太短了。我已经更新了codepen。我可以让文本重叠，但我也需要有文本背景。
你能试试这个吗？ .container div:hover { overflow-y: scroll; white-space: normal; z-index: 2; max-width: 100px; max-height: 100px; background: red; }

【解决方案2】：

在这里你可以试试这个逻辑：

.container {
  max-width: 100px;
  margin: 0 auto;
}
.container div {
  height: 100px;
  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;
}

<html>
<body>
  <div class="container">
    <div>1) This is the full title that I want to be revealed
    </div>
    <div>2) This is the full title that I want to be revealed
    </div>
    <div>3) This is the full title that I want to be revealed
    </div>
  </div>
</body>
</html>

【讨论】：

【解决方案3】：

它实际上是重叠的，但您必须删除 div 的背景颜色才能看到重叠。

.container {
  max-width: 100px;
  margin: 0 auto;
}
.container div {
  height: 100px;
/*   background-color: grey; */
}
.container div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.container div:hover {
  overflow: visible;
  white-space: normal;
  z-index: 2;
  position: absolute;
  max-width: 100px;
}

<html>
<body>
  <div class="container">
    <div>1) This is the full title that I want to be revealed
    </div>
    <div>2) This is the full title that I want to be revealed
    </div>
    <div>3) This is the full title that I want to be revealed
    </div>
  </div>
</body>
</html>

如果您希望 div 保持在自己的位置，只需从 css 中删除“position: absolute”规则。

.container {
  max-width: 100px;
  margin: 0 auto;
}
.container div {
  height: 100px;
/*   background-color: grey; */
}
.container div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.container div:hover {
  overflow: visible;
  white-space: normal;
  z-index: 2;
/*   position: absolute; */
  max-width: 100px;
}

<html>
<body>
  <div class="container">
    <div>1) This is the full title that I want to be revealed
    </div>
    <div>2) This is the full title that I want to be revealed
    </div>
    <div>3) This is the full title that I want to be revealed
    </div>
  </div>
</body>
</html>

【讨论】：

超长标题需要 position:absolute 。我已经更新了代码笔，我需要文本的背景，我想扩展 div 来覆盖它