两个div在同一个位置答案

【问题标题】：Two divs on same position两个div在同一个位置
【发布时间】：2013-04-20 14:38:52
【问题描述】：

我有两个 div。第二个 div 应该在第一个 div 上，所以...当单击第一个 div 中的菜单按钮时，第一个 div 上应该出现第二个 div（第二个 div 覆盖第一个 div）。我在第一个 div 下创建了第二个 div，给它相对位置，然后把它带到第一个。但有一个问题。有溢出，导致 div 很长，并且 div 的高度保存在底部。怎么做这件事没有任何问题？

【问题讨论】：

发布您的代码以及您自己的尝试。

标签： html css

【解决方案1】：

HTML

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

CSS

.wrapper{
  position: relative;
}

.firstDiv, .secondDiv{
  position: absolute;
}

【讨论】：

没有绝对定位可以吗？或者如果使用绝对定位，父元素可以有最大元素的宽度，但不涉及js，只使用css？
我的意思是，绝对定位不需要 JS，但是你可以在没有绝对定位的情况下做到这一点。你可以做 .wrapper { white-space: nowrap } .firstDiv, .secondDiv { width: 100%;显示：内联块； } .secondDiv { 变换：translateX(-100%) }
这个解决方案的问题是包装器仍然需要两个 div 组合的宽度，而我需要它只是最长的单词jsfiddle.net/v40sam7g，一些上下文 - 我需要在这两者之间进行动画转换，只有当我以一种方式实现它时，我才发现了这个问题。所以我没有重写它，而是保持原样，但宽度是跳跃而不是变换。
我假设宽度是固定的，但如果您需要其他解决方案，可以将转换替换为 margin-left: -100% 并将 width: 0px 添加到 .secondDiv。 jsfiddle.net/2bjfgsrL/1 注意 HTML 中 firstDiv 和 secondDiv 之间的推荐，没有这个浏览器会在它们之间添加一个空格，并且位置会关闭。
感谢另一个解决方案，但不幸的是，这仍然不是我的解决方案，因为我不知道哪个 div 更大 - 第一个或第二个，它只有在第一个更大时才有效 - jsfiddle.net/5n14au2e。我已经想到了另一个解决方案，与 css 无关，所以目前这纯粹是理论上的问题，所以如果你感兴趣的话，只能浪费时间。再次感谢您的反馈。

【解决方案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/

【讨论】：

这非常有用，因为它很容易将整个设备嵌入到包含 div 中，该 div 会自动调整以适应其内容。

【解决方案3】：

通过 css-grid 获得真正的答案，

将父级设置为显示：网格

和孩子们到 grid-row/column-start:1 如下答案所示

https://stackoverflow.com/a/50086485/3810321

【讨论】：