Question

我有<div>个元素作为页面，“next”和“back”按钮可以在它们之间切换。单击“下一步”按钮时，当前页面淡出，下一页淡入，使用jQuery。正如我到目前为止所做的那样，确保div彼此坐在一起而不是彼此相邻的唯一方法是为他们设置样式position:absolute。但是，这会强制div还覆盖页面上的任何其他内容，否则它们会被推开。

有没有办法让div基本上只相对于彼此绝对定位，并且仍然表现为相对于页面的其余部分定位？我已经尝试将它们放在相对定位的容器中，但是div会溢出容器，使其或多或少无用。

修改

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

是的，我混淆了$和jQuery。在调用jQuery.noConflict()

之后，我一直在使用jQuery

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);
}

使Div只相互绝对

2 个答案: