因此，我有一个固定的div，标题下方有标题和图像，然后我想在固定div下方的流中有另一个div。随着浏览器宽度的变化，带有标题和图像的固定div将改变大小，最大宽度为700px。当固定的div带有图像变化大小的固定div时，固定div下包含文本的div应保持图像底部下方的相对位置。
我尝试在固定的Div周围实现包装器，并且还尝试了包含文本的DIV的保证金顶部，但是无论我尝试什么，我尝试了固定的Div下的文本流。
对我做错了什么的任何帮助将不胜感激！这就是我目前拥有的：
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;
}<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">
<!-- <img src="https://images.pexels.com/photos/40753/military-raptor-jet-f-22-airplane-40753.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb" alt="Plane2">
<img src="https://images.pexels.com/photos/164646/pexels-photo-164646.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb" alt="Plane3"> -->
</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 facere porro officia magnam dolorum fuga iste. Quam, consequatur provident reiciendis quis doloribus at hic itaque soluta maiores libero voluptas assumenda, ut alias mollitia corrupti nulla fuga autem sapiente recusandae, aspernatur ad sed quasi earum. Nostrum, alias veritatis est qui quae ratione. Dignissimos et eum modi, beatae odio porro totam, minus debitis eius expedita mollitia ea est veritatis, ut possimus delectus! Nesciunt, ad quos quasi soluta error cum veritatis aliquam, temporibus optio, commodi fuga perferendis aperiam dignissimos debitis?</p>
</div>
</div>
</div>
</body>使用z-index控制堆叠上下文。您也可以将平面图像用作.Text Div。
的背景css for z index下面：
.title-wrapper {
width: 100%;
position: fixed;
z-index: 1;
}
.text {
text-align: center;
position: relative;
z-index: 10;
}