定位在绝对定位的 div 下方

Question

我有两个 <div> 和 absolute position。显示一个，另一个正在加载 display: none。单击可见的 link 时，它会移动并显示另一个。

我有第三个 <div> 和 link，我想直接在这些下面显示。因为他们都是position: absolute，所以我一直没能找到办法做到这一点。我找到了各种解决方案，但大多数都是使用绝对位置的变通方法。由于我的 <div> 需要相互重叠显示，很遗憾我无法删除绝对定位。

因此，我在三个 <div> 上尝试了 position: absolute 和 position: relative 的各种组合，但到目前为止没有任何效果。

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

<div> with id linkbar 就是需要放在最下面的

其他两个<div>没有设置高度所以margin-top不会起作用。 linkbar 也需要位于 <div> 的正下方，而不是恰好位于页面底部。

Answer 1

我体验到使用 div 作为 buffer 非常有用且易于实现此目的。您只需将它设置在您的 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>

定位在绝对定位的 div 下方

Positioning below absolutely positioned divs

html

javascript

css

jquery

css-position