如何在一个包装 div 中重叠 2 个文本 div？ [复制]答案

【问题标题】：How do I overlap 2 text-divs in one wrapper div? [duplicate]如何在一个包装 div 中重叠 2 个文本 div？ [复制]
【发布时间】：2019-08-20 04:49:03
【问题描述】：

有一个包装 div 包含两个具有不同文本的 div。我需要更改悬停时的文本，并且将 text2 div 放置在与 text1 相同的位置。

.wrapper {
  background: red;
  width: max-content;
  padding: 20px;
}

.text1 {
  background: green;
  opacity: 1;
  transition: all 0.5s;
}

.text2 {
  background: yellow;
  opacity: 0;
  transition: all 0.5s;
}

.wrapper:hover>.text1 {
  opacity: 0;
}

.wrapper:hover>.text2 {
  opacity: 1;
}

<div class="wrapper">
  <div class="text1">Text 1</div>
  <div class="text2">Text 2</div>
</div>

如何在一个包装 div 中重叠 2 个文本 div？

This is不完全一样的问题，在链接作者设置宽度：100%；高度：100%；但我必须以某种方式将包装器的高度和宽度调整为文本大小。

【问题讨论】：

对于您上面的简单示例，您可以在 text2 上使用 transform: translateY(-100%); 但是当有更多内容时，此方法可能效果不佳，您可以将其中一个绝对定位并将其定位在另一个
@Huangism 不完全是，在链接作者设置宽度：100%；高度：100%；但我必须以某种方式将包装器的高度和宽度调整为文本大小。
它向您展示了如何将一个元素覆盖在另一个元素之上，这本质上是您的问题。另外，它在其他答案中也有所有解释，请仔细阅读以了解其工作原理
如果你真的按照所有东西的精确尺寸，那么几乎不会有任何重复，这个概念就在那里，如果你真的做了任何研究，你一开始就不会问这个

标签： javascript html css hover

【解决方案1】：

您可以绝对定位第二个文本 div，使其顶部位置等于您在包装器 div 上设置的填充：

.wrapper {
  background: red;
  width: max-content;
  padding: 20px;
}

.text1 {
  background: green;
  opacity: 1;
  transition: all 0.5s;
}

.text2 {
  background: yellow;
  opacity: 0;
  transition: all 0.5s;
}

.wrapper:hover>.text1 {
  opacity: 0;
}

.wrapper:hover>.text2 {
  opacity: 1;
}

.text2 {
  position: absolute;
  top: 20px;
}

.wrapper {
  position: relative;
}

<div class="wrapper">
  <div class="text1">Text 1</div>
  <div class="text2">Text 2</div>
</div>

【讨论】：