CODEWITHSUNDEEP
htmlcss
Taj El Amine
Taj El Amine

Reputation: 105

Placing two divs on top of each other without using Position:absolute

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>

Upvotes: 9

Views: 13276

Answers (4)

Sean Ker
Sean Ker

Reputation: 5

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>

Upvotes: 0

patelarpan
patelarpan

Reputation: 7991

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>

Upvotes: 30

Danny
Danny

Reputation: 1113

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>

Upvotes: 2

Rajat Audichya
Rajat Audichya

Reputation: 59

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.

Upvotes: 0

Related Questions