如何在不使用position:absolute的情况下使一个按钮出现在另一个按钮之上？

Question

我想渲染一个控件，该控件将出现在右侧，位于另一个占容器宽度 100% 的控件的顶部。

我想要的示例（带按钮）：

z-index我尝试通过为小按钮的属性设置较高的值来实现此目的。但这不起作用。

我的尝试：

.mydiv {
    display: flex;
    flex-direction: row;
}

<div class="mydiv">
    <button style="width:100%; height:30px;">big button</button>
    <button style="width:80px; height:20px; z-index:99;">smallbutton</button>
</div>

不过我得到这个：

知道如何使用 Flexbox 来实现这一点吗position:absolute？如果可能的话？

Answer 1

这是 CSS 网格的工作，您可以将两个元素放在同一区域：

.mydiv {
  display: grid;
}

.mydiv>button {
  grid-area: 1/1;
}

<div class="mydiv">
  <button style="width:100%; height:30px;">big button</button>
  <button style="width:80px; height:20px;place-self: center end">smallbutton</button>
</div>