在不使用 Position:absolute 的情况下将两个 div 放在一起

Question

I have been trying to add two divs on top of each other without using Position:absolute, and it is not working.

Does anyone know how to do that?? Thank you.

<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>

Answer 1

you can do this using grid.

 .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> 

Answer 2

If both elements are in normal flow, you could use a negative margin-top on the element which you want to layer on top of it's predecessor:

 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> 

Answer 3

Try giving position relative to both the elements and align the second element on top of the first by using z-index 2 to the second element and top:(); left:(); that would not effect your navbar.

Answer 4

This is one way to do it though a cleaner way might be to get the width of the element you're covering using javascript so that you can dynamically cover elements without statically putting in exact pixel value for margin-left, as is the case for css for blue div

 .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>