一個容器在另一個之上？

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

position: absolute您在#img元素上設置的position: absolute CSS導致了此問題。 當您在內部元素上使用絕對位置並且外部元素設置為height: auto ，外部元素不知道它應該有多高，因為內部元素已從position: absolute的文檔流中刪除。 為了保持響應速度，您不想設置嚴格的height: XXXpx在媒體查詢中的#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;
}

更新的代碼筆

Answer 2

您需要在媒體查詢和#img div中將容器的高度設置為height:auto;以外的值height:auto;

在此示例中，我使用height:450px因為它是您在桌面視圖中的容器中使用的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{
}
}

讓我知道您是否還有問題

一個容器在另一個之上？

問題描述

2 個解決方案

解決方案1
1 已采納 2015-01-20 12:55:27

解決方案2
0 2015-01-20 12:53:38

一個容器在另一個之上？

問題描述

2 個解決方案

解決方案1 1 已采納 2015-01-20 12:55:27

解決方案2 0 2015-01-20 12:53:38

解決方案1
1 已采納 2015-01-20 12:55:27

解決方案2
0 2015-01-20 12:53:38