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

Question

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

我有一个容器，里面有 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 是有问题的容器。其中的图像挡住了它下面的容器。我希望图像在整个屏幕宽度上伸展。

正如我所说，我相当确定这是一个定位问题，但我觉得我也可能从 #slideshow 容器中遗漏了一些重要的东西，但我找不到它是什么。

在此先感谢您提供的任何帮助！

Answer 1

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

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

Answer 2

您应该在整个幻灯片放映周围放置一个包装器 div 并给它 position:relative; 这样它将包含幻灯片放映并创建您需要的间距。

如果您考虑得更多 javascript 您可以添加这段代码

$(document).ready(function() 
{
 var objHeight = 0;
 $.each($('#slideshow').children(), function(){
        objHeight = $(this).height();
 });
 $('#slideshow').height(objHeight);
});

DEMO

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

Container hidden behind other container

html

css

containers

css-position