Question

我试图制作一个网站但是当我创建一个导航时它与身体发生冲突。 body .main css在导航菜单中显示marigin top。但我为身体内容设置了这个

您可以在此处查看jsfiddle

这是css代码

*{margin: 0;
            padding: 0;}
            nav .navigation {margin: 0;
                 padding: 0;
                 position: fixed;
                 background: #333;
                 z-index: 999;
                 width: 100%}
nav .navigation li{display: inline-block;
                   padding: 5px 10px;}
nav .navigation li a{text-decoration: none;
                     color: #e1e1e1;}
nav .navigation li a:hover{color: #EDEDED}
.main { margin-top: 30px; }
.slide{background-attachment: fixed;
       width: 100%;
       height: 100%;
       position: relative;
       padding: 30px;
}

这是html代码

 <nav>
            <ul class="navigation">
                <li data-slide='1'><a href="#">slide1</a></li>
                <li data-slide='2'><a href="#">slide2</a></li>
                <li data-slide='3'><a href="#">slide3</a></li>
                <li data-slide='4'><a href="#">slide4</a></li>
            </ul>
        </nav>

        <div class="main">
            <div class='slide' id='slide1' data-slide='1' data-stellar-background-ratio='0.5'>
                <div class="container">
                    <div class="row">

                        <div class="col-md-6">
                            <h1>welcome</h1>
                        </div>
                    </div>
                </div>

            </div>

        </div>

Answer 1

这是因为导航栏上的“position：fixed”。将保证金最高点：30px更改为padding-top：30px;

Answer 2

通常在使用position: fixed时，您应指定位置，而不是将其留在浏览器中以确定放置元素的位置。在使用position: fixed时，您不太可能想要浏览器默认位置，因为您无论如何都要强制它离开流程。

例如，在nav .navigation选择器上添加top: 0之类的内容。

nav .navigation {
    top: 0;
    margin: 0;
    padding: 0;
    position: fixed;
    background: #333;
    z-index: 999;
    width: 100%
}

Answer 3

只需替换代码：

nav .navigation {margin : 0;
    padding: 0;
    position: fixed;
    background: #333;
    z-index: 999;
    width: 100%;
    top:0;                  
}

我已更新您的js小提琴：**http://jsfiddle.net/JLjT2/6/.**请检查

Answer 4

因为你设置了位置：修复（ nav .navigation ）

删除修复属性，如果你想要nev的定位，那么添加top：0px;在同一个班级

见这里

nav .navigation
{
                 margin: 0;
                 padding: 0;
                 position: fixed;
                 background: #333;
                 z-index: 999;
                 width: 100%;
                 top:0px;}

CSS与其他人发生冲突

4 个答案: