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