两个div在同一位置

Question

我有两个div。第二个div应该在第一个div上面，所以……当点击第一个div中的菜单按钮时，第二个div应该出现在第一个div上（第二个div覆盖第一个div）。我将第二个div创建在第一个div下面，给它相对位置，并把它移到第一个div上方。但是出现了一个问题。由于div太长，导致它的高度被保存在底部，发生了溢出。如何在没有任何问题的情况下完成这件事？

- Tigran

---

请发布您的代码，以及您自己的尝试。 - George

Answer 1

HTML

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

CSS

.wrapper{
  position: relative;
}

.firstDiv, .secondDiv{
  position: absolute;
}

- hobberwickey

---

可以不用绝对定位吗？或者如果使用绝对定位，父元素能否具有最大元素的宽度，但是没有涉及JS，仅使用CSS？ - llamerr

我的意思是，绝对定位不需要JS，但是你也可以不使用绝对定位来实现。你可以这样做：.wrapper { white-space: nowrap } .firstDiv, .secondDiv { width: 100%; display: inline-block; } .secondDiv { transform: translateX(-100%) } - hobberwickey

这个解决方案的问题在于包装器仍然采用两个div组合的宽度，而我需要它只是最长单词的宽度http://jsfiddle.net/v40sam7g/，一些背景 - 我需要在这两者之间动画变换，只有当我以某种方式实现它时，我才发现了这个问题。所以我没有重写它，而是将其保留为原样，但宽度跳跃而不是转换。 - llamerr

我一开始假设宽度是固定的，但如果你需要另一种解决方案，你可以用margin-left: -100%替换转换，并在.secondDiv中添加width: 0px。http://jsfiddle.net/2bjfgsrL/1/请注意HTML中第一个和第二个div之间的注释，没有这个注释，浏览器会在它们之间添加一个空格，位置就会错了。 - hobberwickey

谢谢您提供的另一种解决方案，但不幸的是这对我仍然不是解决方案，因为我不知道哪个div更大 - 是第一个还是第二个，并且它只适用于第一个更大的情况 - http://jsfiddle.net/5n14au2e/. 我已经有另一个解决方案，与css无关，所以现在这只是一个纯理论问题，如果您对此感兴趣，请继续浪费时间。再次感谢反馈。 - llamerr

Answer 2

HTML

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

CSS：

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

jsfiddle演示

http://jsfiddle.net/xnqsF/

- Harshit Tailor

---

这更加有用，因为它非常容易将整个设备嵌入包含的 div 中，该 div 可自动调整大小以适应其内容。 - Rabih Kodeih

Answer 3

通过css-grid，可以得到真正的答案，

将父元素设置为display:grid，

子元素设置为grid-row/column-start:1，如下所示的答案。

https://dev59.com/YWMl5IYBdhLWcg3w5aeQ#50086485

- MintWelsh