如何在包含可縮放圖像的固定div下的流中放置div

因此，我有一個固定的div，標題下面有標題和圖像，然後我想在固定div下的流中有另一個div 。帶標題和圖片的固定div會隨着瀏覽器寬度的變化而改變大小，最大寬度爲700px。由於具有圖像的固定div改變大小，固定div下的包含div的文本應保持低於圖像底部的相對位置。如何在包含可縮放圖像的固定div下的流中放置div

我已經嘗試過在固定div周圍實現一個包裝，並且還嘗試了包含文本的div的margin-top，但不管我嘗試固定div下的文本流。

任何幫助我做錯了將不勝感激！這是我目前有：

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

 
.container { 
 
\t 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>

來源

2017-09-27 techcrewe

使用的z-index來控制堆疊內容。您也可以使用平面圖像作爲.text div的背景。

CSS下面的z-index：

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

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

來源

2017-09-27 19:30:59

感謝您的答覆。我對z-index的理解是它允許div放在不同的圖層上。對不起，如果我造成與術語混淆，但我實際上是試圖讓第二個div下面的固定部分，其中包含一個圖像，將擴大與瀏覽器寬度。所有div都將位於同一頂層。 – techcrewe

如何在包含可縮放圖像的固定div下的流中放置div

回答

相關問題