html - 两个div在同一个位置

Question

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

Answer 1

HTML

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

CSS

.wrapper{
  position: relative;
}

.firstDiv, .secondDiv{
  position: absolute;
}

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/

Answer 3

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

将父级设置为显示：网格

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

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