Question

所以我在标题下方有一个标题和图像的固定div，然后我希望在固定div下面的流程中有另一个div。带有标题和图像的固定div将随浏览器宽度的变化而改变大小，最大宽度为700px。当图像改变大小的固定div时，固定div下的包含文本的div应保持图像底部下方的相对位置。

我尝试在固定div周围实现一个包装器，并且还尝试使用包含文本的div的margin-top，但不管我在固定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>

Answer 1

使用z-index控制堆叠上下文。您还可以使用平面图像作为背景.text div。

下面的z-index CSS：

.title-wrapper {
  width: 100%;
  position: fixed;
  z-index: 1;
}

.text {
  text-align: center;
  position: relative;
  z-index: 10;
}

如何在包含可伸缩图像的固定div下的流中定位div

1 个答案: