一个容器在另一个之上？

debugcn 发表于 Dev

查理·科普斯通

我在这里有一个奇怪的人，我在一个容器中有一个图像幻灯片，在它下面有一个包含文本的容器。在桌面视图中，它按我的意愿显示，但是在媒体查询中，文本容器似乎将其自身放置在图像幻灯片的顶部。不太清楚为什么：

实践错误：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{
        }
        }

非常感谢任何建议。

吉列

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

解决方案是position: absolute从#img元素的CSS中删除

#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;
}

更新的代码笔

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。