Positioning below absolutely positioned divs

Question

I have two <div> with absolute position . One is displayed and the other is display: none at boot time. When a link to a visible one is clicked, it moves and the other is displayed.

I have a third <div> with a link that I would like to display directly below them. Since theyre and position: absolute , I could not find a way to do this. I have found various solutions, but most of them are workarounds for using an absolute position. Since my <div> should show each other, I, unfortunately, cannot remove the absolute positioning.

So I tried various combinations of position: absolute and position: relative on three <div> s, but so far nothing has worked.

JSFiddle with my problem: https://jsfiddle.net/dagz9tLw/1/

<div> with id linkbar is the one that should be at the bottom.

The remaining two <div> do not have a given height, so margin-top does not work. linkbar should also be just below the <div> , not the bottom of the page.

Answer 1

I experienced that using a div acting as a buffer is very useful and easy to implement for this purpose. You simply set it above your div#linkbar and adjust its height at boot time and when the div#front gets a reposition:

 $("#topBuffer").css("height", $("#front").offset().top + $("#front").height()); $("#showLink").click(function() { if (!$("#back").is(":visible")) { $("#back").show(); $("#front").animate({ 'marginLeft': "+=30px" }); $("#front").animate({ 'marginTop': "+=20px" }); $("#topBuffer").animate({ 'height': "+=20px" }); } return true; }); 

 .front { width: 400px; display: block; border: 2px solid #000000; text-align: center; position: absolute; margin-top: 20px; z-index: 10; background-color: white; } .back { display: none; width: 400px; border: 2px solid #000000; text-align: center; position: absolute; z-index: 1; margin-top: 20px; background-color: white; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="front" class="front"> <a id="showLink" href="javascript:void(0);">front</a> </div> <div id="back" class="back"> <a href="">back</a> </div> <div id="topBuffer"></div> <div id="linkbar"> <a href="">test</a> <a href="">test</a> <a href="">test</a> </div>