With 4 sections, each featuring a background image and text in the middle, I encountered an issue when attempting to have them fixed while scrolling. The goal was for the section below the first one to overlap the one above it along with its text as we scroll.
Despite using position fixed for the text, only the text in the first section is visible.
Here's the HTML structure:
<div class="site-body">
<section id="section1">
<div class="section-text1">
Section 1
</div>
</section>
<section id="section2">
<div class="section-text2">
Section 2
</div>
</section>
<section id="section3">
<div class="section-text3">
Section 3
</div>
</section>
<section id="section4">
<div class="section-text4">
Section 4
</div>
</section>
</div>
And here's the CSS styling:
.page-wrapper .site-body #section1 {
position: relative;
width: 1024px;
height: 100%;
background-color: red;
background: url(../images/section1.jpg) no-repeat fixed;
background-position: center center;
z-index: 2000;
}
.page-wrapper .site-body #section1 .section-text1 {
position: fixed;
width: 300px;
margin: 0 auto;
padding-top: 100px;
background: #000000;
}
/* Repeat styling for sections 2, 3, and 4 */