I need help with positioning elements in my HTML layout. I have one element stacked below another and am using relative positioning to nudge the bottom element up slightly so that it overlaps the top element.
The paperOverlay element is positioned at the bottom of the page, but due to the relative positioning, there is some unwanted space left at the bottom. Is there a way to prevent this whitespace?
Here's how the HTML code looks:
<div class="container">
<div class="homePage">
<!-- content goes here -->
</div>
<div class="paperOverlay" style="position: relative; top: -70px;">
<!-- more content goes here -->
</div>
</div>
And here is the corresponding CSS:
.container {
width: 960px;
margin: 0 auto;
}
.homePage {
width: 800px;
height: 500px;
}
.paperOverlay {
width: 960px;
min-height: 400px;
background: url('Images/Overlay.png') no-repeat top center;
}
In essence, I want the torn paper edge effect of the overlay element to slightly overlap the bottom of the element above it. While setting margin-top: -70px helped fix the height issue, it resulted in the top element's contents overlapping the overlay. How can I ensure that the overlay remains on top?