在绝对定位的div下方定位

Question

我有两个使用绝对定位的

元素。其中一个在加载时显示，另一个是display: none。当点击可见元素上的链接时，它会移动并显示另一个元素。

我有第三个带有链接的

元素，我想直接显示在这些元素下面。由于它们都是position: absolute，我无法找到一种方法来实现这一点。我已经找到了各种解决方案，但大多数都是针对使用绝对定位的变通方法。由于我的

元素需要彼此覆盖，所以不幸的是我不能去掉绝对定位。

因此，我尝试在这三个

元素上使用position: absolute和position: relative的各种组合，但迄今为止没有任何作用。

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

<div>带有idlinkbar的是需要放在底部的。

另外两个<div>没有设置高度，所以margin-top不起作用。linkbar还需要放在<div>下方，而不是页面底部。

- Vinc

---

能否将所有这些<div>放入另一个<div>中并使其绝对定位？还是我理解错误了问题？或者是否有可能将其中一些<div>分组在一起？ - Sebastian Simon

当移动div时，链接应该随之向下移动还是div应该覆盖链接？ - Robert Cordes

@Xufox 可以，但是当它被显示时，后面的 div 也会被定位在前面的 div 下面。 - Vinc

@RobertCordes 链接应该向下移动，但不要向右移动。 - Vinc

Answer 1

我经历了使用 div 作为 缓冲器 对于这个目的非常有用和易于实现。您只需将其设置在您的 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>

- Markai

---

@Vinc 顺便说一下：如果你想要元素向下滑动，你可以将 $("#front").animate({ 'marginTop': "+=20px" }); $("#topBuffer").animate({ 'height': "+=20px" }); 放在匿名回调函数中，用于右滑动画。 - Markai

Firebug目前显示TypeError: $(...).offset(...) is undefined，我正在使用jQuery 1.11.0和jQuery UI 1.10.3，但在jsfiddle中使用该版本可以正常工作，我是否遗漏了什么？ - Vinc

没事了，我已经解决了。在文档准备好之前，它运行了 $("#topBuffer").css("height", $("#front").offset().top + $("#front").height()); 这一行代码。现在它可以完美地工作了，谢谢。 - Vinc