我将<div>元素作为页面,并使用“下一步”和“后退”按钮在它们之间进行切换。单击“下一页”按钮时,使用jQuery,当前页面淡出,而下一页淡入。到目前为止,正如我一直在做的那样,确保div彼此叠置而不是彼此相邻的唯一方法是为它们设置position:absolute样式。但是,这迫使div也叠加在页面上的其他任何东西,否则它们会被推开。

有什么方法可以使div基本上仅相对于彼此绝对定位,并且仍然像它们相对于页面其余部分定位一样起作用?我尝试将它们放入相对放置的容器中,但是div溢出了容器,使它或多或少地变得无用。

编辑:

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

是的,我混淆了$jQuery。调用jQuery.noConflict()后,我已经使用了很多jQuery

最佳答案

如果您的页面(如它们所称)具有固定的宽度和高度,则可以将其容器设置为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/

10-07 19:39
查看更多