Positioning below absolutely positioned divs

Question

I have two <div>s with absolute position. One is displayed and the other is display: none on load. When the link on the visible one is clicked it is moved and the other is displayed.

I have a third <div> with link that I would like to display directly below these. Since they’re both position: absolute I have not been able to find a way to do this. I have found various solutions, but most of them are workarounds for using absolute position. Since my <div>s need to show ontop of each other I unfortunately can’t remove the absolute positioning.

As such I have tried various combinations of position: absolute and position: relative on the 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 needs to be at the bottom.

The other two <div>s don’t have a set height so margin-top won’t work. linkbar also needs to be just below the <div>s and not right at the bottom of the page.

Answer 1

I experienced that using a div acting as a buffer is quite useful and easy to implement for this purpose. You just set it above your div#linkbar and adjust it's height on load and when the div#front get's repositioned:

$("#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>