Html 使用css在div标记中重叠按钮

您好，这是一个关于用div标记重叠两个按钮的快速问题，我该怎么做？我尝试了位置和边距，但都没有移动按钮

以下是html：

<div class="container-fluid">
    <div style="margin:auto;">
        <button type="submit" class="btn-login">Log in</button>
    </div>
    <div class="signup-form">
    <label style="text-align:center;margin-bottom:20px">Create an Account</label>

    <div>
        <button type="submit" class="btn-login">Sign Up Free</button>
    </div>
        <label style="text-align:center;margin-bottom:20px;margin-top:20px">or</label>
    </div>
</div>
    <div class="social_media">
        <button type="submit" class="btn-facebook"></button>
        <button type="submit" class="btn-gmail"></button>
    </div> 
</body>

第一个截图是现在的样子，第二个截图是我试图复制的照片

---

尝试添加到btn类

位置：绝对位置

然后将它们移动到所需位置

---

您可能还需要更改z索引。

将

社交媒体上的位置设置为
relative
，然后根据需要使用
top
属性移动它们。例如：

.social_media {
    text-align:center;
    position: relative;
    top: -74px;
}

将父对象的位置
属性值设置为
相对
（控制重叠），将
按钮DIV的位置
设置为
绝对
。现在将按钮放在
按钮DIV
内，然后使用
负值将
按钮DIV
放置在所需位置


.parent{
宽度：150px；
高度：150像素；
保证金：0自动；
背景：红色；
位置：相对位置；
}
.按钮{
宽度：100px；
高度：45px；
线高：45px；
文本对齐：居中；
位置：绝对位置；
背景：darkOrange；
边界半径：5px；
底部：-22.5px；
左：50%；
-webkit转换：translateX（-50%）；
转换：translateX（-50%）
}


.social_media {
    text-align:center;
    position: relative;
    top: -74px;
}