Question

嗨，我有这个问题：我的网站上有标题，屏幕全宽，正在工作。我想用@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;
    }
}

我该如何解决？

感谢您的回答，对不起我的英语。

Answer 1

好的，我明白了！我有很高的线高。解决方案从

改变

.show-menu{
    ..
    line-height: 48px;
    ..
}

到

.show-menu{
    ..
    line-height: 43px;
    ..
}

导航栏覆盖响应式设计中的菜单项

1 个答案: