<div>
absolute
我有两个position
。一个显示,另一个在加载时为display: none
。单击可见链接上的链接时,将移动该链接并显示另一个链接。
我有第三个<div>
链接,我想直接在这些链接下面显示。既然他们都是position: absolute
,我就无法找到办法做到这一点。我找到了各种解决方案,但大多数都是使用绝对位置的解决方法。由于<div>
需要在彼此上显示,我很遗憾无法移除绝对定位。
因此,我在三个position: absolute
上尝试了position: relative
和<div>
的各种组合,但到目前为止还没有任何效果。
JSFile with my problem:https://jsfiddle.net/dagz9tLw/1/
标识<div>
的 linkbar
是需要位于底部的标识。
其他两个<div>
没有设定的高度,因此margin-top
无效。 linkbar
也需要在<div>
之下,而不是在页面底部。
答案 0 :(得分:4)
我经历过使用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>