不使用Position:absolute将两个div叠放在一起

Question

我一直在尝试在不使用position:absolute的情况下叠加两个div，但是没有成功。

有人知道如何实现吗？谢谢。

<div class="row" style="background-color:aqua;">
  <div class="col-xs-12 col-sm-12 col-md-12" >   

        <div style="left:0px;">
               <asp:Label ID="lblEmail" runat="server" Text="Label" />
        </div>

        <div style="left:0px;">
             <asp:Button ID="btnJoin" runat="server" Text="a button" 
                  CssClass="btn btn-lg btn-primary"/>
        </div>

  </div>
</div>

- Taj El Amine

---

position:absolute有什么问题吗？ - Rich

可能是不使用绝对定位叠加Divs的重复问题。 - Rich

@Mark 我在这一行下面有一个导航栏，但是当我给这一行的div添加position:absolute属性时，整个行都会被放到导航栏后面。 - Taj El Amine

只需将position属性设置为absolute，而不是同时设置两个。 - Temani Afif

@TemaniAfif 但是这样divs将不会位于彼此之上。 - Taj El Amine

你需要将一个位置设为绝对位置，并将其调整到另一个位置的顶部。 - Temani Afif

Answer 1

你可以使用网格来完成这个操作。

.parent {
  display: grid;
  grid-template-columns: 1fr;
}

.parent div {
 padding: 50px;
 background-color: rgba(0,0,0,0.5);
 grid-row-start: 1;
 grid-column-start: 1;
}

<div class="parent">
  <div class="child1">
  1
  </div>
  <div class="child2">
  2
  </div>
</div>

- patelarpan

---

对我来说，显然是正确的答案。谢谢！ - Pizzicato

这就是确切的答案。 - Mislam

Answer 2

如果两个元素都处于正常流中，您可以在要覆盖其前一个元素的元素上使用负的margin-top：

body {
  margin: 0;
  padding: 0;
}

.box {
  padding: 20px;
  background: coral;
}

.box--overlay {
  background: rgba(0, 255, 255, 0.4);
  text-align: right;
  margin-top: -40px; /*Change this to a value of your choosing*/
}

<div class="box">I am box 1</div>
<div class="box box--overlay">I am box 2</div>

- Danny

Answer 3

这是一种方法，但更好的方法可能是使用JavaScript获取要覆盖的元素的宽度，以便您可以动态地覆盖元素，而无需静态地放置精确的像素值来设置margin-left，就像对于蓝色div的CSS一样。

.red {
  background: rgba(255,0,0,0.5);
  display: inline-block;
}
.blue {
  background: rgba(0,0,255,0.5);
  display: inline-block;
  margin-left: -24px;
}

<div class="red">red</div>
<div class="blue">blue</div>

- Sean Ker

Answer 4

尝试将位置相对于两个元素进行设置，并使用z-index 2将第二个元素与第一个元素重叠，然后使用top:(); left:();来对齐第二个元素，这不会影响您的导航栏。

- Rajat Audichya

---

很遗憾，这不起作用了。但无论如何还是谢谢您 :) - Taj El Amine

哦！对不起，有很多方法可以在另一个div上方显示一个div，我相信最简单的方法是将第二个div嵌套在第一个div内，并将其绝对定位，使第一个div相对定位或将第一个元素的z-index设置为0，第二个元素设置为>1。然而，根据马克的代码修改.row意味着同时修改bootstrap.css中的.row类，从而影响整个页面。 - Rajat Audichya