HTML 位置固定在移动版本中答案

【问题标题】：HTML Position Fixed in a mobile versionHTML 位置固定在移动版本中
【发布时间】：2017-03-31 03:10:50
【问题描述】：

我希望你能帮帮我。我在移动版本中尝试做的是使用固定到访问者的位置使菜单栏始终可见并且它工作正常，问题是第二个 div 调用它显示在菜单栏后面，我真的没有知道如何在菜单栏之后显示它。

我正在使用 500 像素的移动版本。

我该如何解决这个问题？我希望你能帮助我

....

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<style type="text/css">
body {
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    height: 1000px;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;    
}   
.container {
    width: 95%;
    margin-right: auto;
    margin-left: auto;
    background-color: #f1f1f1;
    height: 1000px;
    max-width: 950px;
}
header{
    height: 150px;
    border-color: red;
    border-style: dotted;
    margin-bottom: 5px;
    }
aside{
    height: 200px;
    border-color: blue;
    border-style: dotted;
    margin-bottom: 5px;

    }
section{
    height: 200px;
    border-color: yellow;
    border-style: dotted;
    margin-bottom: 5px;
    }
article{
    height: 200px;
    border-color: deeppink;
    border-style: dotted;
    margin-bottom: 5px;
}
footer{
    height: 200px;
    background-color: green;
    border-style: dotted;

}

nav{
    width: 100%;
    float: left;
}

nav ul{
    list-style: none;
    padding: 0;
    overflow: hidden;
    margin-top: 56px;
}

nav ul li{
    padding: 10px;
    display: inline-block;
    overflow: hidden;
}

nav ul li a{
    color: red;
}

.menu {
    display: none;
}

@media screen and (max-width:700px){

    .container{
        background-color: deeppink;
    }
}

@media screen and (max-width:500px){

    body{
        margin: 0;

    }
    .container{
        background-color: #CCCCCC;
        width: 100%;


    }
    header{
        margin-bottom: 5px;
        border-style:none;
        height: auto;

    }

    .menu{
        display: block;
        background-color: black;
        width: 100%;
        height: auto;
        margin-top: 0px;
        position: fixed;



    }

    .menu .icon-menu{
        color: #fff;
        padding: 10px;
        font-size: 28px;

    }

    .menu .menu_txt{
        color: #fff;
        float: right;
        padding: 10px;
        font-size: 18px;
        margin-top: 5px;
        margin-right: 5px;
    }

    nav{
        background-color: #595959;
        height: 100%;
        position: fixed;
        width: 90%;
        display: none;
    }

    nav ul{
        border-color: deeppink;
        margin-top: 0px;



    }

    nav ul li{
        background-color: #3E3E3E;
        display: block;
        margin-top: 0px;
        width: 100%

    }

    aside{
        margin-top: 0px;
    }
}
</style>
<link href="fonts.css" rel="stylesheet" type="text/css">
</head>


<body>
<div class="container">

    <header>




        <div class="menu">
            <div class="menu_txt">MENU</div>
            <div class="icon-menu"></div>
        </div>



        <nav>
            <ul>
                <li><a href="#">page</a></li>
                <li><a href="#">page</a></li>
                <li><a href="#">page</a></li>
                <li><a href="#">page</a></li>
                <li><a href="#">page</a></li>
            </ul>
        </nav>

    </header>

    <aside>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id excepturi nesciunt in modi ratione alias vero ipsam optio quod quaerat fugiat est nihil temporibus, earum, necessitatibus ducimus hic cumque inventore?</aside>
    <section>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, incidunt necessitatibus asperiores quibusdam voluptas eos doloremque vitae consectetur earum facilis repudiandae ullam quisquam perferendis tempora. Illo, officia atque natus itaque.</section>
    <article>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis necessitatibus explicabo obcaecati cum minima mollitia quam assumenda perferendis dicta. Cumque placeat, aliquam itaque ad quia accusamus autem tempora ex fugit.</article>
    <footer>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus at natus pariatur eligendi possimus ipsa corporis rem rerum omnis, perferendis, earum vero dolorum optio, nihil odit dolores autem asperiores recusandae!</footer>



</div>
</body>
</html>

【问题讨论】：

标签： html position css-position fixed

【解决方案1】：

在您的媒体查询中，为您的正文添加 margin top 或 padding top 以将内容推送到菜单下方，然后添加 top: 0;到您的菜单，以确保它保持在顶部。 http://codepen.io/anon/pen/JWwRmN

@media screen and (max-width:500px){
    body{
        margin: 0;
        margin-top: 50px;
    }
      .menu{
        display: block;
        background-color: black;
        width: 100%;
        height: auto;
        margin-top: 0px;
        position: fixed;
        top: 0;
    }

【讨论】：