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

【问题标题】：Container hidden behind other container隐藏在其他容器后面的容器
【发布时间】：2015-04-27 19:44:11
【问题描述】：

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

我有一个容器，里面有一个 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 容器中的一些重要内容，但我找不到它是什么。

提前感谢您提供的任何帮助！

【问题讨论】：

只是一个建议。您应该在页面末尾而不是在头部编写脚本。页面加载速度会更快！

标签： html css css-position containers

【解决方案1】：

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

如果你会考虑更多的 javascript，你可以添加这段代码

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

DEMO

【讨论】：

这大部分是正确的，但根据标记，幻灯片 div 足以作为包装器。我会投票，因为你没有错，这会起作用，但是使用幻灯片 div 并为其添加高度就足够了。
没错，我应该更仔细地检查 OP 的代码以找出它。如果幻灯片 div 的位置相对于您提到的分配给它的高度，它将节省一些额外的标记。无论如何，可以这么说，这是用于将绝对定位的项目带回页面流的方法。
谢谢！我想过给幻灯片容器增加一个高度，但我不知道高度会是多少。图片缩放到页面的宽度，那么我应该放什么高度？
如果您不确定添加高度，请尝试上述方法，然后在幻灯片周围放置一个包装器，并使用相对位置。它将采用其内部元素的高度。
我已经更改了其中有一个小错误的javascript。它现在应该可以工作了。

【解决方案2】：

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

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

【讨论】：

width: auto; 不是 100% 必要的，但如果你做一个宽度，我会推荐一个 100% 的宽度。
谢谢！我想过给幻灯片容器增加一个高度，但我不知道高度会是多少。图片缩放到页面的宽度，那么我应该放什么高度？
作为一个jquery hack，你可以在window.load之后获取图片的高度，并将容器的高度设置为图片的最大高度。