0
嗨，我有这个问题：我有我的网站上的标题和全屏幕的工作。我想用@media解决低屏幕分辨率。我有一个输入类型=复选框。如果复选框被选中，则显示菜单项。但问题是为什么div.overlay页面覆盖我的和项目？ 给你的jsfiddle：myTry在响应式设计中导航栏叠加菜单项
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Blog Bundle</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<!-- Normalize css -->
<link rel="stylesheet" href="css/normalize.css">
</head>
<body>
<header class="box box-top">
<div class="wrap">
<span class="logo">Mobile blog</span>
<div class="spacer"></div>
<label for="show-menu" class="show-menu">Menu</label>
<input type="checkbox" id="show-menu" role="button">
<div class="menu" id="menu">
<a href="#" class="box-item box-item-blue">Iphone</a>
<a href="#" class="box-item box-item-green">Samsung</a>
<a href="#" class="box-item box-item-red">Huawei</a>
<a href="#" class="box-item box-item-white">Blackberry</a>
<a href="#" class="box-item box-item-yellow">Sony</a>
<a href="#" class="box-item box-item-purple">LG</a>
<a href="#" class="box-item box-item-orange">Nokia</a>
<a href="" class="box-item pull-right">Log In</a>
</div>
</div>
</header>
<div class="container">
<div class="intro-image" style="background-image: url('img/cover.png');">
<div class="overlay"></div>
</div>
</div>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>
</html>
风格是在这里：
@import url(http://fonts.googleapis.com/css?family=Lobster);
div.container{
padding: 0;
width:100%;
}
/* Top image */
.intro-image{
min-width: 100%;
width: 100%;
height: 550px;
max-width: 1000px;
background-repeat: no-repeat;
background-position: center;
}
.overlay{
position: relative;
height: 100%;
background-color: rgba(32,32,32,.7);
}
/* Navigate bar/box */
header{
height: auto;
}
.box{
height: 50px;
width: 100%;
background-color: rgb(0,0,0);
}
.box.box-top{
top:0;
}
.box .logo{
color:white;
font-family: 'Lobster', cursive;
font-size: 32px;
float: left;
}
.box .spacer{
width: 1px;
height:30px;
margin: 10px 30px;
background: white;
background-image: url('../img/spacer.png');
float:left;
}
/* Default definition of box item */
.box-item{
padding: 0 15px;
color:#919090;
float: left;
line-height: 47px;
display: block;
font-weight: bolder;
z-index: 999;
}
.box-item:hover{
padding: 0 15px;
color:#fff;
float: left;
line-height: 47px;
display: block;
font-weight: bolder;
text-decoration: none;
}
/* Color definitions of box items */
/* Blue */
.box-item-blue{
border-bottom: 3px solid #0074D9;
}
.box-item-blue:hover{
border-bottom: 0px solid #0074D9;
color: #0074D9;
}
/* Green */
.box-item-green{
border-bottom: 3px solid #2ECC40;
}
.box-item-green:hover{
border-bottom: 0px solid #2ECC40;
color: #2ECC40;
}
/* Red */
.box-item-red{
border-bottom: 3px solid #FF4136;
}
.box-item-red:hover{
border-bottom: 0px solid #FF4136;
color: #FF4136;
}
/* White */
.box-item-white{
border-bottom: 3px solid #FFFFFF;
}
.box-item-white:hover{
border-bottom: 0px solid #FFFFFF;
color: #FFFFFF;
}
/* Yellow */
.box-item-yellow{
border-bottom: 3px solid #FFDC00;
}
.box-item-yellow:hover{
border-bottom: 0px solid #FFDC00;
color: #FFDC00;
}
/* Orange */
.box-item-orange{
border-bottom: 3px solid #FF851B;
}
.box-item-orange:hover{
border-bottom: 0px solid #FF851B;
color: #FF851B;
}
/* Purple */
.box-item-purple{
border-bottom: 3px solid #B10DC9;
}
.box-item-purple:hover{
border-bottom: 0px solid #B10DC9;
color: #B10DC9;
}
/* Wrapper */
.wrap{
width:100%;
margin:auto;
max-width: 1100px;
}
/* Button for responsive menu */
.show-menu{
padding: 0 15px;
color:#919090;
float: left;
line-height: 48px;
display: block;
font-weight: bolder;
border: 1px solid rgb(32,32,32);
cursor: pointer;
display: none;
}
.show-menu:hover{
color: #fff;
}
.box input[type=checkbox]{
display: none;
}
input[type=checkbox]:checked ~ .box{
height: auto;
}
input[type=checkbox]:checked ~ #menu{
display: block;
}
@media screen and (max-width : 832px){
/*Make dropdown links appear inline*/
.menu {
position:static;
height: auto;
display: none;
}
/*Make all menu links full width*/
.box-item{
width: 100%;
background: rgb(0,0,0);
text-align: center;
}
/*Display 'show menu' link*/
.show-menu {
display:block;
}
/* Color definitions of box items (only hover state) */
/* Blue */
.box-item-blue:hover{
border-bottom: 3px solid #0074D9;
color: #0074D9;
}
/* Green */
.box-item-green:hover{
border-bottom: 3px solid #2ECC40;
color: #2ECC40;
}
/* Red */
.box-item-red:hover{
border-bottom: 3px solid #FF4136;
color: #FF4136;
}
/* White */
.box-item-white:hover{
border-bottom: 3px solid #FFFFFF;
color: #FFFFFF;
}
/* Yellow */
.box-item-yellow:hover{
border-bottom: 3px solid #FFDC00;
color: #FFDC00;
}
/* Orange */
.box-item-orange:hover{
border-bottom: 3px solid #FF851B;
color: #FF851B;
}
/* Purple */
.box-item-purple:hover{
border-bottom: 3px solid #B10DC9;
color: #B10DC9;
}
}
我该如何解决呢？
感谢您的回答，并对我的英语感到抱歉。
你可以用另一种方式提高英语你的问题？ “但问题是为什么div.overlay覆盖我的和项目的页面？” – izolate 2014-11-24 18:49:29
当然： 为什么'.overlay'重叠菜单项。 – Franky238 2014-11-24 18:57:17
小提琴请。 – ProllyGeek 2014-11-24 19:05:43