Anker Karussell Navigation HTML zum unteren Rand des Bildes mit nur CSS (ohne CSS-Gitter)

Question

In dem Beispielbild habe ich Navigation. Der folgende Beispielcode zeigt ein potenzielles Markup. Wenn das Bild und den folgenden Text zusammen bewegen muss (von Seite zu Seite gleiten), wie kann ich die Position der Navigation mit nur CSS verankern. Ich vermute, dass ich mich auf etwas JavaScript verlassen muss, ohne die Höhen der Elemente zu kennen, aber ich würde es lieber nicht tun müssen.

Um klar zu sein, scheint die Navigation hier zentriert zu sein, aber sie sind nicht. Sie müssen am unteren Rand einer beliebigen Bildhöhe floaten.

UPDATE

Beispielcode (see CodePen):

<div class="carousel"> 
    <div class="indices"> 
     <a href="#"><div class="dot"><div class="ghost">Carousel slide 1</div></div></a> 
     <a href="#"><div class="dot"><div class="ghost">Carousel slide 2</div></div></a> 
     <a href="#"><div class="dot"><div class="ghost">Carousel slide 3</div></div></a> 
    </div> 
    <div class="gutter"> 
     <div class="content"> 
      <div class="img"><img src="https://cdn.pixabay.com/photo/2016/05/25/13/55/horses-1414889_1280.jpg" alt="Horses"></div> 
      <div class="text">This text content can really be any arbitrary height, so it wouldn’t work to just use negative margins on the navigation, unfortunately.</div> 
     </div> 
     <div class="content"> 
      <div class="img"><img src="https://upload.wikimedia.org/wikipedia/commons/d/de/Nokota_Horses_cropped.jpg" alt="Other Horses"></div> 
      <div class="text">Also, images can be arbitrary heights.</div> 
     </div> 
     <div class="content"> 
      <div class="img"><img src="http://maxpixel.freegreatpicture.com/static/photo/640/Water-Turtle-Nature-Reptile-649667.jpg" alt="Turtles"></div> 
      <div class="text">Turtles</div> 
     </div> 
    </div> 
    <div class="nav"> 
     <a class="item prev" href="#" aria-label="Previous carousel story"></a> 
     <a class="item next" href="#" aria-label="Next carousel story"></a> 
    </div> 
</div> 

Mein Code ist sehr flexibel; Ich kann Dinge bewegen, wenn es sein muss.

Answer 1

Haben Sie versucht, position: relative und position: absolute (wie in diesem simple example) zu verwenden? Sie wickeln die Bildlauf- und die Kugelnavigation in ein Div ein, in dem Sie die Position relativ festlegen. Setzen Sie den Navigations-Wrapper dann auf die absolute Position (unten: 0, um ihn am unteren Rand des übergeordneten div zu platzieren). Es bleibt normalerweise an Ort und Stelle, auch wenn sich das Bild ändert, da die Höhe des Eltern-Divs von der Img-Höhe abhängt.

.outer-div { 
    position: relative; 
} 

.bullet-nav { 
    position: absolute; 
    bottom: 0; 
    left: 50%; 
    transform: translateX(-50%); /* to center nav */ 
}