我将<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/