html - CSS 与其他 div 冲突

Question

我曾尝试创建一个站点，但是当我创建一个导航时，它会与正文发生冲突。 body .main css 在导航菜单中显示margin 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

这是因为导航栏上的“位置:固定”。将 margin-top: 30px 更改为 padding-top: 30px;