固定位置不遵循屏幕分辨率

时间:2017-11-08 10:11:22

标签: html css position

我会在屏幕上建立一个主菜单这样的网页 enter image description here

屏幕分辨率超过1300px没有任何问题,我们可以查看上面的图像。

当我尝试调整broswer的大小时为了更改设备的分辨率,导航栏不遵循broswer分辨率,我们可以在下面的图像中查看

enter image description here

这是我的网页代码:

<style>
    .container{
        background-color: red;
        max-width: 1300px;
        /*allienamento div principale a centro*/
        margin:0 auto;
        width: 100%;
        height: 5500px;
    }
    .logo{
        background-color: #00387C;
        width:220px;
        height: 200px;
        z-index: 2;
        position: fixed;
        padding-left: 20px;
    }
    nav.mainmenu{
        width: 100%;
        height: 160px;
        position: fixed;
        top:0;
        padding: 0;
        z-index: 1;
        max-width: 1300px;
        margin:0 auto;
        background-color: #ffedb3;
        border-bottom-color: silver;
        border-bottom-style: ridge;
        border-bottom-width: thin;
        box-shadow: 0px 5px 5px rgba(0,0,0,.1);
        padding-right: 1px;
        margin-right: 1px;
    }
</style>
<div class="container">
    <div class="logo">

    </div>
    <nav class="mainmenu">

    </nav>
</div>

2 个答案:

答案 0 :(得分:1)

应用css规则

html{ margin:0px; padding:0px;}
body{ margin:0px; padding:0px;}

答案 1 :(得分:0)

尝试将left: 0添加到nav.mainmenu