无需使用Position:absolute实现两个div层叠的方法求助

当然有不少靠谱的方法能不用position:absolute实现div层叠效果，我给你分享几个实用的方案，你可以根据自己的场景选择：

方案一：CSS Grid 布局（最直观） #

Grid布局可以直接让多个子元素占据同一个网格单元格，天然就能实现层叠，再搭配z-index就能轻松控制层级：

<div class="row" style="background-color:aqua; display: grid;">
    <div style="grid-area: 1 / 1 / 2 / 2; z-index: 1;">
        <asp:Label ID="lblEmail" runat="server" Text="Label" />
    </div>
    <div style="grid-area: 1 / 1 / 2 / 2; z-index: 2;">
        <asp:Button ID="btnJoin" runat="server" Text="a button" CssClass="btn btn-lg btn-primary"/>
    </div>
</div>

这里grid-area: 1 / 1 / 2 / 2的作用是让两个div都落在第一行第一列的网格单元里，z-index数值大的元素会显示在上面。

方案二：Flexbox 结合偏移（灵活度高） #

用Flex布局让元素在同一行排列，然后通过负边距或者transform: translateX()把后面的元素拉回去覆盖前面的元素，同样用z-index控层级：

用负边距实现：

<div class="row" style="background-color:aqua; display: flex;">
    <div style="z-index: 1;">
        <asp:Label ID="lblEmail" runat="server" Text="Label" />
    </div>
    <div style="margin-left: -80px; z-index: 2;">
        <asp:Button ID="btnJoin" runat="server" Text="a button" CssClass="btn btn-lg btn-primary"/>
    </div>
</div>

用transform实现：

<div class="row" style="background-color:aqua; display: flex;">
    <div style="z-index: 1;">
        <asp:Label ID="lblEmail" runat="server" Text="Label" />
    </div>
    <div style="transform: translateX(-80px); z-index: 2;">
        <asp:Button ID="btnJoin" runat="server" Text="a button" CssClass="btn btn-lg btn-primary"/>
    </div>
</div>

这种方法需要你大概知道要覆盖的宽度，调整偏移量就行，适合需要微调位置的场景。

方案三：Float 结合负边距（兼容旧浏览器） #

如果需要兼容一些比较老的浏览器，float也能实现，不过现在用得不多了：

<div class="row" style="background-color:aqua; overflow: hidden;">
    <div style="float: left; z-index: 1;">
        <asp:Label ID="lblEmail" runat="server" Text="Label" />
    </div>
    <div style="float: left; margin-left: -80px; z-index: 2;">
        <asp:Button ID="btnJoin" runat="server" Text="a button" CssClass="btn btn-lg btn-primary"/>
    </div>
</div>

overflow: hidden是用来清除浮动的，避免父元素高度塌陷，负margin让第二个div左移覆盖第一个。

小提示：这些方法里，Grid是最推荐的，因为逻辑清晰，不需要计算偏移量；Flex和Float适合需要更灵活控制位置的场景。另外要注意，z-index在Grid和Flex容器里，即使元素是默认的position: static也能生效，因为它们属于特殊的堆叠上下文。

内容的提问来源于stack exchange，提问作者Taj El Amine