使Div只对彼此绝对

Question

我有<div>元素作为页面，"next“和"back”按钮在它们之间切换。当单击" next“按钮时，使用jQuery，当前页面会逐渐消失，下一页会逐渐消失。正如我到目前为止所做的那样，确保div坐在一起而不是坐在一起的唯一方法是将其设置为position:absolute。然而，这迫使div也在页面上覆盖其他任何东西，否则它们就会被推开。

是否有任何方法使div基本上是相对于彼此绝对定位的，并且仍然表现为它们相对于页面的其余部分的位置？我试着把它们放在一个相对定位的容器中，但是div溢出了它们的容器，使它或多或少地毫无用处。

编辑：

基础小提琴：http://jsfiddle.net/9AXS4/4/

是的，我把$和jQuery混为一谈。打电话给jQuery后，我一直在使用jQuery.noConflict()

Answer 1

如果您的页面(如您所称的)具有固定的宽度和高度，那么您可以将它们的容器设置为position:relative，并具有页面的宽度和高度。

.container{
   position:relative;
   width:500px; /*the total width of a page, including padding and borders*/
   height:400px; /*the total height of a page, including padding and borders*/
}

这样，容器元素将处理其他元素的推送。

这是你修正过的小提琴：http://jsfiddle.net/gaby/9AXS4/2/

(容器的宽度/高度必须考虑到页面元素上的填充和边框)

另外，您使用的是.pagecontainer而不是#pagecontainer (因为您使用的是id)。

更新(在评论任意高度后)

由于您的页面高度不是固定的，您将需要求助于jQuery来调整容器的大小。

下面是一个完整的演示：http://jsfiddle.net/gaby/9AXS4/7/

Answer 2

div不能是绝对相对的，但它们可以绝对地相对于外部div定位。保存页面div的容器应该有position: relative，以便包含绝对定位的内部页面div。

如果存在不必要的重叠，则可以在外部div上使用overflow: hidden或overflow: auto来隐藏它，这取决于是否允许滚动。如果要使用overflow属性，请确保包含一个高度和宽度，以便浏览器知道溢出的位置。

http://jsfiddle.net/vkTXs/

$(".page").each(function(){
    jQuery(this).hide();
});
$(".page").first().show();
$(".next").click(function() {
    jQuery(this)
    .parent().fadeOut()
    .next().fadeIn();
    var page = $(this).parent().next();
    resizeContainer(page);
});
$(".back").click(function() {
    jQuery(this)
    .parent().fadeOut()
    .prev().fadeIn();
    var page = $(this).parent().next();
    resizeContainer(page);
});

function resizeContainer(page){
    // get height of next page
    var newPageHeight = $(page).height();
    // add padding and border
    newPageHeight = newPageHeight + 14;
    $('#pagecontainer').height(newPageHeight);
}