Überlappende Divs bei absoluter Positionierung

Question

Es gibt ziemlich viele Themen zu diesem Thema, aber keine von ihnen hat mein Problem gelöst.

<div class="outer"> <!-- fixed height --> 
    <div class="inner">content</div> <!-- needs to be placed AFTER outer --> 
</div> 
<!-- the inner div should be placed here with css AND NOT overlap any of the following content --> 
<div>no overlap please</div> 

outer hat eine genaue Höhe während inner Höhe auf seinen Inhalt abhängt. Ich muss innernach der outer Container bewegen; ohne überlappt den folgenden Inhalt. Da ich die Höhe des inner Div nicht kenne, kann ich nicht einfach margin auf dem outer verwenden.

Im Falle der Frage: Struktur muss so sein. Es ist ein Bootstrap-Karussell und ich muss die Indikatoren des Karussells auf den Boden legen - die Indikatoren müssen innerhalb des Schiebereglers sein.

bearbeiten: Das Problem ist nicht, wie den inner Behälter am Boden des Behälters des outer zu bekommen. Das Problem, indem es absolut positioniert und auf den unteren Rand gesetzt wird, besteht darin, dass der Inhalt kommende divs überlappt.

Irgendwelche Ideen? Vielen Dank!

Answer 1

kann ich denke an die folgenden:

.outer {postion:relative;} 
.inner { 
    position: absolute; 
    top: 100%; 
} 

Dies wird die .inner nach .outer anzuzeigen. Wenn Sie das jedoch nicht meinen, können Sie versuchen, die Elemente mit jquery zu verschieben. Lass es mich wissen und ich werde versuchen zu helfen.

EDIT:

Wenn es dynamisch sein muss, ich denke, Sie Javascript verwenden sollte, oder zumindest ich bin nicht mit irgendeiner anderen Weise von CSS. Bitte beachten Sie ein funktionierendes Beispiel mit JQuery im Jsfiddle: https://jsfiddle.net/r6hskbn3/3/

Answer 2

Sie müssen Set-Top-Position auf 100% für diese

.inner { 
    position: absolute; 
    top: 100%; 
}