Javascript 使div仅对彼此是绝对的

我有

元素作为页面，还有“下一步”和“上一步”按钮在它们之间切换。单击“下一步”按钮时，使用jQuery，当前页面淡出，下一页淡入。到目前为止，我一直在这样做，确保两个div坐在一起而不是挨着坐的唯一方法是设置它们的样式

position:absolute

。然而，这迫使div也覆盖了页面上的任何其他内容，否则它们会将这些内容推到一边

是否有任何方法可以使div基本上处于绝对位置，只是相对彼此而言，并且仍然像它们相对于页面的其余部分一样定位？我试着把它们放在一个相对位置的容器中，但是div溢出了它们的容器，使得它或多或少没有用处

编辑：

基本小提琴：

是的，我混淆了

$

和

jQuery

。在调用

jQuery.noConflict（）

之后，我一直在使用jQuery。如果您的页面（如您所称）具有固定的宽度和高度，那么您可以将其容器设置为

位置：相对

，并具有页面的宽度和高度

.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*/
}

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

---

这是你的小提琴：

（容器的宽度/高度必须考虑页面元素上的填充和边框）
另外，您使用的是

.pagecontainer

而不是

#pagecontainer

（因为您使用了

id

）

---

更新（在对任意高度发表评论之后）

由于页面高度不是固定的，因此需要借助jQuery来调整容器的大小

---

这里是一个完整的演示：

div不能相对于彼此绝对定位，但它们可以相对于外部div绝对定位。保存页面div的容器应该具有

位置：relative

，以便包含绝对定位的内部页面div

如果存在不需要的重叠，您可以在外部div上使用

overflow:hidden

或

overflow:auto

将其隐藏，具体取决于是否允许滚动。如果要使用

溢出

属性，请确保包含高度和宽度，以便浏览器知道溢出的位置

---

你能再给我们看一点你的代码吗？也许是一张？你也可以展示一张图片吗？唯一的方法是使用

位置：relative

overwise他们没有在dom中保留空间“divs overflow thes container”->

overflow:hidden

我的实际项目中的html和javascript有点混乱和复杂，所以我现在正在整理一个基本的文件这不是我真正想要的。我已经这样做了，但仍然有溢出。我不需要隐藏溢出，我需要它相应地改变容器的大小。更准确地实现了我的目标。我的错不是一开始就这么说。问题是我实际上并没有固定页面的高度。所以，您希望视图区域的大小随页面的高度而改变吗？我认为这是正确的。基本上，至少模拟了一个正常的相对定位元素的样式。我已经尝试了这个实现，我想我并没有在小提琴中很好地表现出来，但是页面的高度实际上并不是固定的。最好在这里摆弄一下：这个id/类混淆是一个可怕的错误。这基本上就是我要用的。

$(".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);
}