定位在绝对定位的div下面

我有两个absolute position <div> 。 一个显示，另一个display: none负载。 点击可见链接上的链接时，会移动链接，并显示另一个链接。

我有第三个<div>链接，我想直接显示在这些下面。 既然他们都是position: absolute我一直没能找到办法做到这一点。 我找到了各种解决方案，但其中大多数都是使用绝对位置的解决方法。 由于我的<div>需要互相显示ontop，所以我不能删除绝对定位。

因此，我尝试过三种不同的position: absolute组合position: absolute position: relative和position: relative对于三个<div> s，但至今没有任何工作。

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

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

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

---

我经历过，使用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>

链接地址: http://www.djcxy.com/p/84533.html

上一篇: Positioning below absolutely positioned divs

下一篇: what is best/right way to call postgres function or stored procedure from nodejs