Marge auf absolutes Element

Question

Ich habe gesucht, aber keine der Lösungen scheint für mich zu arbeiten. Ich habe im Wesentlichen einige grundlegende Markup

<section id="testimonial" class="section"> 
    <div id="testimonial-container" class="testimonial-carousel white-back"> 

    </div> 
    <div id="imageContainer" class="container"> 
    <div class="row"> 
     <div class="col-md-3 offset-6"> 
     <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSyj8ojsALtvYLKCCAxYVuTu3oxP4CmmIfNlC__LvYg4MbPIyZq" class="btmImg"> 
     </div> 
    </div> 
    </div> 
</section> 

Jetzt testimonial-container ist einfach ein Behälter für ein Zeugnis slider. Es hat eine min-height von 400px. Der eigentliche Abschnitt hat eine Höhe von 100vh.

Der Teil, mit dem ich kämpfe, ist dies. Am Ende des Abschnitts platziere ich ein Bild. Da ich ihm eine absolute Position gebe, wird sich ein Margin-Top nicht auf den Testimonial-Container auswirken. Ich habe eine JSFiddle eingerichtet, um zu demonstrieren.

Wie Sie sehen können, sitzt das untere Bild oben auf dem Testimonial-Container. Gibt es irgendeinen Weg, um eine Grenze oder etwas zu geben, um dies zu verhindern?

Dank

So gibt es einen Abschnitt über diesem Abschnitt, die ich nicht in der Fiddle enthalten war. Ich arbeite an Sektion B, die eine Mindesthöhe von 100vh hat. Der weiße Bereich ist der Testimonial-Container, er überlappt leicht Abschnitt A, hat eine Breite von 400px und sitzt in der Mitte. Es gibt dann ein Bild ganz unten in der Sektion.

Answer 1

ich die gleiche Situation Ihres Bildes repliziert haben:

.section-A { 
 
    background: lightgrey; 
 
    height: 100vh; 
 
} 
 

 
.section-B { 
 
    position: relative; 
 
    background: brown; 
 
    height: 100vh; 
 
    min-height: 800px; /* if you remove min-height <img> will overlap .testimonal-container */ 
 
} .testimonial-container { 
 
    min-height: 400px; 
 
    width: 70%; 
 
    background: white; 
 
    position: absolute; 
 
    top: -10%; /* increase to move up */ 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
} img { 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
}

<div class="section-A"> 
 
</div> 
 

 
<div class="section-B"> 
 
    <div class="testimonial-container"> 
 
    </div> 
 
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSyj8ojsALtvYLKCCAxYVuTu3oxP4CmmIfNlC__LvYg4MbPIyZq" /> 
 
</div>

Same Code in jsfiddle: https://jsfiddle.net/z69w9u4g/28/

Beachten Sie, dass left: 50%; transform: translateX(-50%); Eigenschaften horizontal verwendet, um das Element Zentrieren, weil Sie margin-left: auto; margin-right: auto; nicht für Elemente verwenden können, die position: absolute;

haben