CSS Problem - Positionierung absolut/releativ - Menüleiste rutsch nach unten

Ich habe ein Verständnisproblem mit absoluter / relativer Positionierung.

Mein Slider-Carousel ist 300px hoch. Darunter kommt eine 40px hohe Thumnail-Leiste. Per CSS habe ich die Thumbnail-Leiste nach oben verschoben, damit diese nun AUF dem Carousel liegt.

Das Problem:
Der Platz an der die Thumbnail-Leiste wird nicht freigegeben. D.h. das nachfolgende Navidationsmenü sollte eigentlich nach oben rutschen. Ich kapiers leider nicht und bekomme es nicht hin. Das Carousel belegt einen Platz von 342px in der Höhe. Ich verstehe auch nicht warum es 342px sind und nicht wenigstens 340px.

Vielleicht kann mir jemand einen Tipp geben.

Hier das Beispiel:
http://ferienhaus-schwarzwald-todtnauberg.de/

Es liegt an der Pagination

Code:

---

.caroufredsel_pagi {
    bottom: 50px;
    display: block;
    float: right;
    padding-top: 20px;
    position: relative;
    right: 10px;
    text-align: center;
    z-index: 2;
}

---

dem kannst Du ein position:absolute, geben dann ist das beseitigt, mal so auf die Schnelle, aber vielleicht kann man das Ganze "eleganter zusammenbauen".

Ahhhh. Vielen vielen Dank!!!

Da war ich irgendwie auf dem falschen Pfad, ich dachte immer es hängt mit der Thumnail-Leiste zusammen.

Für mein Verständnis:

• Wenn ich Position realativ benutze, wird das Element zwar verschoben, aber der Platz wird im Textfluss nicht freigegeben`?
• Wenn ich auf Absolut umstelle, dann nimmt das Element keinen Platz mehr im Textfluss ein. Die Position bezieht sich dann auf das übergeordnete Elternelement mit Position relative, was in meinem Fall das Element 'inside' wäre?

Ja jemand ein gutes Beispiel für einen Bilderslider mit Vorschaubilden und einer guten Navigation? Eigentlich würde ich auch noch gerne ein 'anklicken' der Bilder im Slider möglich machen? Das gibt es bei der Verwendung der Erweiterung 'dk_caroufredsel' als Gallery aber wohl nicht?

Fast ;). Die relative Positionierung funktioniert so wie du geschieben hast. Die absolute Positionierung bezieht sich auf das nächst übergeordnete Element, das nicht "static" positioniert ist, sprich also überhaupt positioniert ist. Das muss also nicht "relative" sein, sondern kann auch "absolute" oder "fixed" sein. In deinem Fall ist das aber trotzdem das div.inside im Header.