Html 隐藏在其他容器后面的容器

我很确定这是一个定位问题，但不幸的是，定位是我的弱点

我有一个包含jquery图像幻灯片的容器。幻灯片中的图像必须是

{position:absolute；}

，否则它们将在页面中一个接一个地显示

不幸的是，幻灯片容器后面的容器显示在幻灯片容器后面，而不是它下面。我认为这是因为幻灯片图像的绝对位置，但我不知道如何纠正它

@charset“UTF-8”；
/*CSS文档*/
#主要{
位置：相对位置；
宽度：100%；
}
#幻灯片放映{
位置：相对位置；
宽度：自动；
}
#幻灯片式IMG{
位置：绝对位置；
排名：0；
左：0；
z指数：8；
不透明度：0.0；
}
#幻灯片显示IMG.active{
z指数：10；
不透明度：1.0；
}
#幻灯片显示IMG.last-active{
z指数：9；
}

无标题文件
/*** 
简单jQuery幻灯片脚本
由Jon Raasch（jonraasch.com）根据FreeBSD许可证发布：免费使用或修改，不对任何内容负责等。如果您喜欢，请链接到我：）
***/
函数滑动开关（）{
var$active=$（“#slideshow IMG.active”）；
如果（$active.length==0）$active=$（“#幻灯片显示IMG:last”）；
//使用此选项可以按图像在标记中的显示顺序提取图像
var$next=$active.next（）.length？$active.next（）：$（“#幻灯片放映IMG:first”）；
//取消对下面3行的注释，以随机顺序拖动图像
//var$sibs=$active.sibles（）；
//var rndNum=Math.floor（Math.random（）*$sibs.length）；
//var$next=$（$sibs[rndNum]）；
$active.addClass（'last-active'）；
$next.css({
不透明度：0.0
})
.addClass（“活动”）
.制作动画({
不透明度：1.0
}，500，函数（）{
$active.removeClass（'active last active'）；
});
}
$（函数（）{
设置间隔（“滑动开关（）”，3000）；
});
关于我
视频
这里有文字
这里有视频
照片放在这里

绝对定位元素和相对定位元素应具有一定的高度和宽度（但块元素的宽度：最初为100%）。否则，下一个元素将与它们重叠。因此，如果您的图像具有一定的高度，例如400px，则：

#slideshow {
position:relative;
width:auto;
height:400px;
}

---

您应该在整个幻灯片周围放置一个包装div，并给它

position:relative这样它将包含幻灯片并创建所需的间距

如果你考虑更多的JavaScript，你可以添加这个代码的小结
$(document).ready(function() 
{
 var objHeight = 0;
 $.each($('#slideshow').children(), function(){
        objHeight = $(this).height();
 });
 $('#slideshow').height(objHeight);
});

只是一个建议。。你应该在页面末尾而不是在页眉处编写脚本。页面加载速度会更快<代码>宽度：自动不是100%必需的，但是如果您选择宽度，我建议您选择100%宽度。谢谢！我想给幻灯片容器增加一个高度，但我不知道高度是多少。图像可以缩放到页面的宽度，那么我应该放多高呢？作为jquery黑客，您可以在window.load之后获得图像的高度，并将容器的高度设置为图像的最大高度。这基本上是正确的，但基于标记，slideshow div可以作为包装器。我将向上投票，因为你没有错，这是可行的，但使用幻灯片div并在其上添加高度就足够了。没错，我应该更仔细地检查OP的代码来找出这一点。如果幻灯片div的位置与您提到的指定高度相对，则可以保存一些额外的标记。无论如何，这是用来将绝对定位的项目带回页面流的方法。谢谢！我想给幻灯片容器增加一个高度，但我不知道高度是多少。图像会根据页面的宽度进行缩放，那么我应该放置多高？如果您不确定是否要添加高度，请尝试上面的方法，并在幻灯片周围放置一个相对位置的包装。它将采用其内部元素的高度。我已经更改了javascript，其中有一个小错误。希望它现在能起作用。