使绝对只为彼此

Question

我有<div>元素为页面，“下一个”和“后退”按钮之间进行切换。当点击“下一步”按钮时，当前页面淡出，下一页使用jQuery淡入。正如我迄今一直在做的那样，确保div彼此坐在一起而不是坐在彼此旁边的唯一方法是对它们进行样式设计position:absolute。然而，这迫使divs也覆盖页面上的任何其他东西，否则他们会推开。

有没有什么办法让div基本上相对于彼此绝对定位，并且仍然表现为它们相对于页面的其余部分定位？我试图把它们放在一个相对定位的容器中，但divs溢出了它们的容器，使它或多或少没有用处。

编辑：

基本小提琴：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的容器应该有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); 
}