同一位置的两个div

Question

我有两个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 获得真实答案，

将父级设置为 display:grid

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

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