Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

I need to stack these two divs on top of each other while maintaining the content positions

I need to stack these two divs on top of each other but am having trouble finding a way to make it possible. I need to keep al the text inside in the same positions but need to be able to have the divs sit on top of one and other without setting absolute positions for them.

Here is what I have...

<body>


<div style="position:relative;">
  <div style="position:absolute">
    <p style="width: 762px; left:193px;" class="large-bold-font">hello hello helloT</p>
    <p id="Customer.Description" style="left: 397px; top: 45px;" class="small-font"></p>
  </div>
</div>


<div style="position:relative;">
  <div style="position:absolute">
    <p style="width: 762px; left:193px;" class="large-bold-font">hello hello helloT</p>
    <p id="Customer.Description" style="left: 397px; top: 45px;" class="small-font"></p>
  </div>
</div>

</body>
like image 226
user3233834 Avatar asked Jan 11 '23 09:01

user3233834


1 Answers

You should put the content of both your divs inside an outer div which has "position:relative", and put absolute positioning on your inner divs, and add a z-index to each of them. Then the larger z-index is placed over the smaller one.

<body>
   <div style="position:relative;">
      <div style="position:absolute;z-index:0;">
         <p style="width: 762px; left:193px;" class="large-bold-font">hello hello helloT</p>
         <p id="Customer.Description" style="left: 397px; top: 45px;" class="small-font"></p>
      </div>

      <div style="position:absolute;z-index:1;">
         <p style="width: 762px; left:193px;" class="large-bold-font">hello hello helloT</p>
         <p id="Customer.Description" style="left: 397px; top: 45px;" class="small-font"></p>
      </div>
   </div>
</body>
like image 96
Peter Avatar answered Jan 28 '23 10:01

Peter