Positionierung von Pfeilen in Flexboxen?

Hallo,

ich wollte bei meiner Website eine kleine Slideshow einbauen. Dazu habe ich erst einmal Pfeile erstellt. Diese wollte ich nun richtig positionieren. Ich hatte die Idee, eine Flexbox um die Bilder mit den Pfeilen zu erstellen und die Pfeile dann einfach mit align-items zu positionieren. Irgendetwas habe ich allerdings falsch gemacht. Vielleicht fällt euch ja mein Fehler auf. Bin für jeden Tipp dankbar.

html:

<div class="slide">
            <div id="footer2">
                <div id="bilder">
                    <div id="flexbox">
                        <div class="post">
                            <img src="wohnzimmer.png" alt="Wohnzimmer">
                            <div class="post-s">
                                <h2>Einbaumöbel</h2>
                            </div>
                        </div>
                        <div class="post1">
                            <img src="badezimmer.png" alt="Badezimmer">
                            <div class="post1-s">
                                <h2>Badmöbel</h2>
                            </div>
                        </div>
                        <div class="post2">    
                            <img src="einbauschränke.png" alt="Einbauschränke">
                            <div class="post2-s">
                                <h2>Einbauschränke</h2>
                            </div>
                        </div>
                    </div>
                    <div class="post3">
                        <img src="hochbett.png" alt="Hochbett">
                        <div class="post3-s">
                            <h2>Kinderhochbetten in Eichemassivholz</h2>
                        </div>
                    </div>
    
                    </div> 
                    
                </div>
                <a class="pfeil pfeil-links"><span>&#10094;</span></a>
                <a class="pfeil pfeil-rechts"><span>&#10095;</span></a>
            </div> 
        </div>

Css:

.slide{
    display: flex;
    border: solid black;
}
.pfeil {
    position: absolute;
    top: 0px;
    bottom: 0px;
    font-size: 50px;
    font-weight: bold;
    display: flex;
    align-items: center;
    
}
.pfeil-links {
    left: 0;
}
.pfeil-rechts {
    right: 0;
}

Answer 1

[regex9]

Wenn du ein Element absolut positionierst, richtet sich an dem ersten Vorfahr aus (Suchrichtung von unten nach oben), der explizit relativ positioniert wird. Gibt es da keinen, ist das in der Regel das body-Element.

Würdest du also bspw. dem Container .slide ein entsprechendes position-Property mitgeben, würden die Pfeile in dieser Box vertial zentriert positioniert werden.

.slide {
  /* ... */
  position: relative;
}

Demo: https://jsfiddle.net/wgacotp3/

Ich würde im Übrigen empfehlen, Überschriftenelemente nicht als Bildunterschriften zu missbrauchen. Für Bilder mit Betitlung empfiehlt sich stattdessen das figure-Element:

<figure>
  <img alt="..." src="...">
  <figcaption>Image caption ...</figcaption>
</figure>

Die Schrift kannst du mit dem font-Property in CSS beschreiben.

Zudem würde ich einmal hinterfragen, ob du nicht mit weniger Boxen für einen Slide auskommst.