Position a div below a fixed div

HTML-CSS
1

So I have a fixed div with title and image below the title, and I want to then have another div, in the flow immediately under the fixed div. The fixed div with title and image will change size as the browser width changes, up to a maximum width of 700px. As the fixed div with image changes size the div containing text under the fixed div should maintain a a relative position below the bottom of the image.

I’ve tried implementing a wrapper around the fixed div, and also tried margin-top for the div containing the text but no matter what I try the text flows under the fixed div.

Any help on what I’m doing wrong would be much appreciated! This is what I currently have so far:

HTML:

<html>
<body>
        <div class="container">
            <div class="title-wrapper">
                <div class="title">
                    <h2>Planes</h2>

                    <div class="image">
                        <img src="https://images.pexels.com/photos/47044/aircraft-landing-reach-injection-47044.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb" alt="Plane1">
                    </div>

                </div>
            </div>
            
            <div class="text">
                <div>
                    <h3>TEXT 1</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium veniam consequuntur libero? Explicabo consectetur rerum odit? Qui ea dolore culpa. Provident, exercitationem reiciendis voluptatum nulla quo nihil iste? Non doloremque officia ex dicta, ea molestias corporis. Quisquam, tenetur! Consequatur totam quaerat ullam incidunt quas nostrum expedita, quidem iste tempora est blanditiis corrupti sunt id! Esse necessitatibus non harum, ad quisquam unde, eius placeat est explicabo ex repudiandae suscipit, ipsum tempora a quibusdam </p>
                </div>
            </div>

        </div>
    </body>
</html>

CSS:

html, body {
    height: 100%;
    width:100%;
}

.container {
	width: 100%;
    margin: 0 auto;
    max-width: 700px;
}
.title-wrapper {
    width: 100%;
    position: fixed;
}
.title {
width:100%;
max-width: 700px;
}
.image {
width: 100%;
}
.image img {
width:100%;
}
.text {
text-align: center;
}
h2 {
    text-align: center;
    background-color: grey;
    width: 100%;
}
h3 {
    text-align: center;
    background-color: green;
    width: 100%;
    max-width: 700px;
}
2

Give the entire container a position of fixed. Everything else can be position relative. Center it by applying 0 to left, bottom, top, and right.
Title wrapper doesn’t need to be styled at all.

.container {
  width: 100%;
  margin: 0 auto;
  max-width: 700px;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}

From there you can adjust the relevant elements’ margin-top as you like.

.image img {
  width: 100%;
  margin-top: -20px;
}
.text {
  text-align: center;
  margin-top: -25px;
}

The takeaway here is that the parent/container can be treated almost as a miniature HTML page, and then that mini-HTML is the only one that needs needs to be positioned relative to the larger HTML page.

3

Thanks for the prompt reply. What you’ve suggested certainly does position the text div below the image div, maintaining the same relative position to the bottom of the image as the browser width changes. However, in my original description I should have said that I’m trying to get the text to scroll as the user scrolls the browser window (sorry, I missed that out). Before scrolling down, I’m trying to get the text div to appear below the image div and maintain that same relative position as the browser width is changed, but the text has to be free to scroll upwards as the user scrolls down. Once I get this working I was then going to have the text fade out under the image, which maintains a fixed position at the top of the page.

From what I’ve read on stackoverflow and other places, the problem seems to be how to have the relative div below the fixed image above and maintain the same relative position as the image changes size with browser width. Everything I’ve tried so far results in the text appearing behind the image, or below the image if I specify a certain margin-top for the text div.

4

Ah, what you’re describing seems like a form of parallax. I personally would start to use JavaScript at this point. I don’t completely trust pure CSS when it comes to scroll effects (although some people have found solutions).

Basically you’d have to give title-wrapper a higher z-index than text, set text to absolute, then tell JavaScript/jQuery to always set text’s top value slightly higher than tittle-wrapper’s height. This fixes the position problem.

For the scrolling solution, I highly recommend learning a plugin like ScrollMagic.js, especially if you’re going to add an animation. The non-plugin solution is to make comparison’s based on text’s top value and how far along you’ve scrolled.

I made a working solution without the animation if you wanna check it out:

Edit: By ‘fade out’ I’m assuming you mean a fading-out animation halfway through the scroll, but if you just want it to disappear, this should work.

5

Just had a better idea to hide the text.

You could specify .title-wrapper to have a white background. The difference between a ‘white’ background and its initial background is that you can’t see through a white background. Since text will be placed behind it, the white background covers it up.