Wie ein Div in den Fluss unter einem festen div mit einem skalierbaren Bild positionieren

Also habe ich eine feste div mit Titel und Bild unter dem Titel, und ich möchte dann ein anderes div, im Fluss sofort unter dem festen div . Das feste div mit Titel und Bild ändert seine Größe, wenn sich die Browserbreite ändert, bis zu einer maximalen Breite von 700px. Da das feste div mit Bild die Größe ändert, sollte das div, das den Text unter dem festen div enthält, eine relative Position unter dem unteren Rand des Bildes beibehalten.Wie ein Div in den Fluss unter einem festen div mit einem skalierbaren Bild positionieren

Ich habe versucht, einen Wrapper um das feste div zu implementieren, und versuchte auch margin-top für das div, das den Text enthält, aber egal was ich versuche, fließt der Text unter dem festen div.

Jede Hilfe auf, was ich falsch mache, würde sehr geschätzt werden! Dies ist, was ich derzeit haben:

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>

Quelle

2017-09-27 techcrewe

Verwendung z-index den Stapelkontext zu steuern. Sie können das Ebenenbild auch als Hintergrund für .text div verwenden.

CSS für z-index unter:

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

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

Quelle

2017-09-27 19:30:59

Vielen Dank für Ihre Antwort. Mein Verständnis von Z-Index ist, dass divs auf verschiedenen Ebenen platziert werden können. Es tut mir leid, wenn ich mit der Terminologie Verwirrung stifte, aber ich versuche tatsächlich, das zweite div direkt unterhalb eines festen div zu bekommen, das ein Bild enthält, das mit der Browserbreite skaliert. Alle Divs befinden sich auf derselben obersten Ebene. – techcrewe

Wie ein Div in den Fluss unter einem festen div mit einem skalierbaren Bild positionieren

Antwort

Verwandte Themen