一个容器在另一个之上？
[英]One container on top of another?
问题描述
I have a strange one here, I have an image slideshow in one container and below it I have another container with text. 
我在这里有一个奇怪的人，我在一个容器中有一个图像幻灯片，在它下面有一个包含文本的容器。 In desktop view it appears as I want, however in media queries the text container seems to position itself on top of the image slideshow. 在桌面视图中，它按我的意愿显示，但是在媒体查询中，文本容器似乎将其自身放置在图像幻灯片的顶部。 Not quite sure why: 不太清楚为什么：
http://codepen.io/anon/pen/OPmxKp http://codepen.io/anon/pen/OPmxKp
Error in practice: http://gyazo.com/8c5d4622cc7f7cb25fdfb4122a5e81ba 实践中的错误： http ： //gyazo.com/8c5d4622cc7f7cb25fdfb4122a5e81ba
HTML: 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: 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{
}
}
Very grateful for any suggestions. 非常感谢任何建议。
2 个解决方案
解决方案1
1 已采纳 2015-01-20 12:55:27
The position: absolute CSS set on your #img element is causing this issue. position: absolute您在#img元素上设置的position: absolute CSS导致了此问题。 When you use absolute position on an inner element and the outer element is set to height: auto , the outer element has no idea how tall it should be because the inner element has been removed from the document flow with position: absolute . 当您在内部元素上使用绝对位置并且外部元素设置为height: auto ，外部元素不知道它应该有多高，因为内部元素已从position: absolute的文档流中删除。 To maintain responsiveness, you don't want to set a strict height: XXXpx to the #img or #container elements in your media queries. 为了保持响应速度，您不想设置严格的height: XXXpx在媒体查询中的#img或#container元素上设置height: XXXpx 。
Solution is to remove position: absolute from the #img element's CSS 解决方案是从#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;
}
解决方案2
0 2015-01-20 12:53:38
You need to set the height of the container in media queries and the #img div as well to a value other than height:auto; 您需要在媒体查询和#img div中将容器的高度设置为height:auto;以外的值height:auto;
In this example i used height:450px since it's the one you used in your container in desktop view http://jsfiddle.net/95jkzw0b/ 在此示例中，我使用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{
}
}
Let me know if you still have a problem 让我知道您是否还有问题
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.