定位在绝对定位的div下面

Question

我有两个<div>s的absolute position.一个显示,另一个display: none负载.单击可见链接上的链接时,将移动该链接并显示另一个链接.

我有第三个<div>链接,我想直接显示在这些链接下面.因为他们都是position: absolute我无法找到办法做到这一点.我找到了各种解决方案,但大多数都是使用绝对位置的解决方法.由于我<div>需要在对方上显示我很遗憾无法移除绝对定位.

因此我已经试过的各种组合position: absolute,并position: relative在三个<div>S,但迄今没有奏效.

JSFiddle我的问题:https://jsfiddle.net/dagz9tLw/1/

<div>id linkbar是需要在底部的那个.

另外两个<div>没有设定的高度,所以margin-top不起作用.linkbar也需要<div>在页面底部,而不是在页面底部.

Answer 1

我的经验是，使用 adiv充当 abuffer非常有用且易于实现此目的。您只需将其设置在您的上方并在负载时以及重新定位div#linkbar时调整其高度：div#front

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