Html 同一位置上的两个div

我有两个div。第二部应该在第一部，所以。。。单击第一个div中的菜单按钮时，第一个div上应出现第二个div（第二个div覆盖第一个div）。我在第一个div下创建了第二个div，给出了它的相对位置，然后把它移到第一个div。但有一个问题。存在溢出，原因是div很长，div的高度保存在底部。如何做到这一点没有任何问题？

HTML

<div class='wrapper'>
   <div class='firstDiv'></div>
   <div class='secondDiv'></div>
</div>

HTML

JSFIDLE演示

---

发布您的代码，并尝试自己的代码。是否可以不使用绝对定位？或者，如果使用绝对定位，父元素是否可以拥有最大元素的宽度，但不涉及js，只使用css？我的意思是，绝对定位不需要js，但可以不用绝对定位。你可以这样做.wrapper{white space:nowrap}.firstDiv.secondDiv{width:100%；display:inline block；}.secondDiv{transform:translateX（-100%）}这个解决方案的问题是，wrapper仍然需要两个div的宽度加起来，而我需要它只包含最长的单词，一些上下文-我需要动画化这两个div之间的转换，只有当我以一种方式实现它时，我才发现了这个问题。因此，我没有重写它，而是保持原样，但宽度是跳跃的，而不是变换。我假设宽度是固定的，但如果您需要另一种解决方案，您可以使用

左边距：-100%

替换变换，并将

宽度：0px

添加到.secondDiv。请注意HTML中firstDiv和secondDiv之间的分隔，如果没有分隔符，浏览器将在它们之间添加一个空格，位置将关闭。感谢提供另一个解决方案，但不幸的是，这仍然不是我的解决方案，因为我不知道哪个div更大-第一个还是第二个，只有在第一个更大的情况下才有效。我已经想到了另一个解决方案，与css无关，所以现在这是一个纯粹的理论问题，所以如果你感兴趣的话，就浪费时间在这个问题上。再次感谢您的反馈。

.wrapper{
  position: relative;
}

.firstDiv, .secondDiv{
  position: absolute;
}

<div class="one">
    <div class="two"></div>
</div>

.one
{
   width: 170px;
height: 170px;
position: relative;
background: red;
}
.two
{
   width: 70px;
height: 70px;
position: absolute;
background: black;
}