一个容器在另一个容器之上？

Question

我这里有一个奇怪的地方，我在一个容器中有一个图像幻灯片，在它下面有另一个带有文本的容器。在桌面视图中，它显示为我想要的，但是在媒体查询中，文本容器似乎将自己定位在图像幻灯片的顶部。不太清楚为什么：

实践错误：http://gyazo.com/8c5d4622cc7f7cb25fdfb4122a5e81ba

HTML:

  <html>
      <head>
        <?php include('header.php'); ?>
        <?php include('footer.php'); ?>

        <title>Charlie Coplestone</title>
        <meta charset="utf-8" /> 
        <meta name="viewport" content="width=device-width,initial-scale=1.0">

        <link rel="stylesheet" href="footer.css" type="text/css"/>
        <link rel="stylesheet" href="header.css" type="text/css"/>
        <link rel="stylesheet" href="js/jsbody.css" type="text/css"/>
        <link rel="stylesheet" href="headerbuttons.css" type="text/css"/>

        <script type='text/javascript' src='js/slider.js'></script>

      </head>

      <!--body-->
      <body onLoad="slideA()">
        <div id="container">
          <img src="images/slideshow/img1.jpg" id="img">
          <div id="l_holder">
            <img onClick="slide(-1)" class="left" src="images/slideshow/leftarrow.png">
          </div>
          <div id="r_holder">
            <img onClick="slide(1)" class="right" src="images/slideshow/rightarrow.png">
          </div>
        </div>
        <div id="container2">
          <h2>In Development - Automatic Image Slideshow in JavaScript</h2>
          <p>More work is to be done on this.</p>
        </div>
      </body>
      </html>

CSS:

        body { 
          background: #141414 url('../images/background1.png');
          background-repeat: repeat-y;
          background-attachment:fixed;
          background-position:center;
        }
        #container{
            height:450px;                                                           
            width:840px;
            margin:120px auto 0 auto;
            position:relative;
        }
        #container2{
            height:60px;
            width:840px;
            margin:0 auto;
            position:relative;
            -moz-box-shadow:0 0 5px 5px black;
            -webkit-box-shadow:0 0 5px 5px black;
            box-shadow:0 0 5px 5px black;
        }
        #container2 p{
            color:white;
            font-size:15px;
            padding-left:5px;
        }
        #container2 h2{
            color:white;
            font-size: 18px;
            text-decoration:none;
            padding-left:5px;
            padding-top:2px;
        }
        #img{
            height:450px;
            width:840px;
            position:absolute; 
            -moz-box-shadow: 0 0 5px 5px black;
            -webkit-box-shadow: 0 0 5px 5px black;
            box-shadow: 0 0 5px 5px black;
        }
        #l_holder{
            height:450px;
            width:100px;
            position:absolute;
            left:0px;
            top:0px;  
            cursor:pointer;
        }
        #r_holder{
            height:450px;
            width:100px;
            position:absolute;
            right:0px;
            top:0px;  
            cursor:pointer;
        }
        .left{
            height:50px;
            width:50px; 
            position:absolute; 
            top:45%;
            left:0px;
        }
        .right{
            height:50px;
            width:50px; 
            position:absolute; 
            top:45%;
            right:0px;
        }
        .clear{
            clear:bottom;
        }

        @media all and (min-width: 320px) and (max-width: 10in){

        body { 
          background: #141414;
        }
        #container{
            width:100%;
            height:auto;
            margin-top: 3%;
        }
        #container2{
        }
        #container2 p{
        }
        #container2 h2{
        }
        #container2 .body_black_box{ 
        }
        #img{
            width:100%;
            height:auto; 
            margin-bottom: 5px;
        }
        #l_holder{
        }
        #r_holder{
        }
        .left{
        }
        .right{
        }
        .clear{
        }
        }

非常感谢任何建议。

Answer 1

您需要在媒体查询和#img div 中将容器的高度设置为 height:auto;

以外的值

在此示例中，我使用了 height:450px，因为它是您在桌面视图中的容器中使用的 http://jsfiddle.net/95jkzw0b/

@media all and (min-width: 320px) and (max-width: 10in){

body { 
  background: #141414;
}
#container{
   width:100%;
    height:450px;                                 
    margin:120px auto 0 auto;
    position:relative;
}
#container2{
}
#container2 p{
}
#container2 h2{
}
#container2 .body_black_box{ 
}
#img{
    width:100%;
    height:450px; 
    margin-bottom: 5px;
}
#l_holder{
}
#r_holder{
}
.left{
}
.right{
}
.clear{
}
}

如果您还有问题，请告诉我

Answer 2

在您的 #img 元素上设置的 position: absolute CSS 导致了这个问题。当您在内部元素上使用绝对位置并且外部元素设置为 height: auto 时，外部元素不知道它应该有多高，因为内部元素已从文档流中删除 position: absolute .为了保持响应能力，您不想在媒体查询中对 #img 或 #container 元素设置严格的 height: XXXpx。

解决方案是从 #img 元素的 CSS

中删除 position: absolute

#img{
    height: 450px;
    width: 840px;
    /* position: absolute; */
    -moz-box-shadow: 0 0 5px 5px black;
    -webkit-box-shadow: 0 0 5px 5px black;
    box-shadow: 0 0 5px 5px black;
}

Updated codepen

一个容器在另一个容器之上？

One container on top of another?

html

css

media-queries