我很确定这是一个定位问题，但不幸的是定位是我的弱点。
我有一个容器，里面有一个 jquery 图像幻灯片。幻灯片中的图像必须是 {position: absolute;} 否则它们只会在页面中一个接一个地显示。
不幸的是，幻灯片容器之后的容器显示在幻灯片容器的后面，而不是下面。我认为这是因为幻灯片图像的绝对定位，但我不知道如何纠正它。
@charset "UTF-8";
/* CSS Document */
#main {
position: relative;
width: 100%;
}
#slideshow {
position: relative;
width: auto;
}
#slideshow IMG {
position: absolute;
top: 0;
left: 0;
z-index: 8;
opacity: 0.0;
}
#slideshow IMG.active {
z-index: 10;
opacity: 1.0;
}
#slideshow IMG.last-active {
z-index: 9;
}<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
/***
Simple jQuery Slideshow Script
Released by Jon Raasch (jonraasch.com) under FreeBSD license: free to use or modify, not responsible for anything, etc. Please link out to me if you like it :)
***/
function slideSwitch() {
var $active = $('#slideshow IMG.active');
if ($active.length == 0) $active = $('#slideshow IMG:last');
// use this to pull the images in the order they appear in the markup
var $next = $active.next().length ? $active.next() : $('#slideshow IMG:first');
// uncomment the 3 lines below to pull the images in random order
// var $sibs = $active.siblings();
// var rndNum = Math.floor(Math.random() * $sibs.length );
// var $next = $( $sibs[ rndNum ] );
$active.addClass('last-active');
$next.css({
opacity: 0.0
})
.addClass('active')
.animate({
opacity: 1.0
}, 500, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval("slideSwitch()", 3000);
});
</script>
<link href="../../Assignment5-Portfolio/HTML/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="main">
<div id="slideshow">
<img src="../Images/bike.png" width="100%" height="auto" class="active" />
<img src="../Images/fish.png" width="100%" height="auto" />
<img src="../Images/stairs.png" width="100%" height="auto" />
<img src="../Images/gage.png" width="100%" height="auto" />
</div>
<div id="aboutme">About me</div>
<div id="videography">Video
<div id="text">text goes here</div>
<div id="video">video goes here</div>
</div>
<div id="photography">
<div id="photos">photos go here</div>
<div id="photography"></div>
</div>
</div>
</body>
</html>因此，#slideshow 是有问题的容器。其中的图像挡住了它下面的容器。我希望图像在整个屏幕宽度上拉伸(stretch)。
正如我所说，我相当确定这是一个定位问题，但我觉得我也可能从 #slideshow 容器中遗漏了一些重要的东西，但我找不到它是什么.
在此先感谢您提供的任何帮助!
最佳答案
您应该在整个幻灯片放映周围放置一个包装器 div 并为其指定 position:relative; 这样它将包含幻灯片放映并创建您需要的间距。
如果您考虑使用更多 javascript，您可以添加这段代码
$(document).ready(function()
{
var objHeight = 0;
$.each($('#slideshow').children(), function(){
objHeight = $(this).height();
});
$('#slideshow').height(objHeight);
});
关于html - 隐藏在其他容器后面的容器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29904571/