1

I have <div> elements as pages, and "next" and "back" buttons to switch between them. When the "next" button is clicked, the current page fades out and the next page fades in, using jQuery. As I've been doing it so far, the only way to ensure that the divs sit on top of each other instead of sitting next to each other is to style them position:absolute. However, this forces the divs to also overlay anything else on the page that they would otherwise push out of the way.

Is there any way to make divs basically positioned absolute only relative to each other, and still act as though they are positioned relative to the rest of the page? I've tried putting them inside a container that is positioned relatively, but the divs overflow their container, making it more or less useless.

Edit:

Basic fiddle: http://jsfiddle.net/9AXS4/4/

Yes, I mix up $ and jQuery. I've been using jQuery a lot after calling jQuery.noConflict()

4

2 回答 2

0

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

如果有不需要的重叠，您可以使用overflow: hidden或overflow: auto在外部 div 上隐藏它，具体取决于您是否要允许滚动。如果要使用该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);
}
于 2013-07-02T19:20:53.983 回答
0

如果您所称的pages具有固定的宽度和高度，那么您可以将它们的容器设置为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#pagecontainerid

更新（在评论任意高度之后..）

由于您的页面高度不固定，您将需要借助 jQuery 来调整容器的大小。

这是一个完整的演示：http: //jsfiddle.net/gaby/9AXS4/7/

于 2013-07-02T19:05:45.910 回答