CSS/HTML 固定导航栏重叠内容答案

【问题标题】：CSS/HTML fixed nav bar overlapping contentCSS/HTML 固定导航栏重叠内容
【发布时间】：2016-03-06 13:15:56
【问题描述】：

我制作了一个贴在页面顶部的导航栏，但它会贴在某些内容上，我尝试在 CSS 文件中使用 margin-top: 100px;，但这只会将导航栏向下移动 100 像素。谁有想法？ Link to js fiddle

CSS

.con {
    overflow: hidden;
    background: #159B00;
    width: 1000px;
    height: 376px;
    border-radius: 10px;
    border: 2px solid black;
    box-shadow: 0 4px 8px black;
}
.nav {
  padding-top: 0px;
  background: #fff;
  height: auto;
  width: 100%;
  z-index: 150;
  top: o;
  position: fixed;
  box-shadow: 0 2px 3px rgba(0,0,0,.4);
}

HTML

        <div class="nav">
            <div id="nav_wraper">
                <ul>
                    <li><a href="RUN ME.html">
                        </div> 
                        </a></li>       
                        </a>
                        </li><li>
                        <a href="index.html">Home</a>
                        </li><li>
                        <a href="#">Designs&#x25BC;</a>
                            <ul>
                            </ul>
                        </li><li>
                        <a href="#">About&#x25BC;</a>
                            <ul>
                            </ul>
                        </li><li>
                        <a href="#">Contact&#x25BC;</a>
                            <ul>
                            </ul>
                        </li>
                    </ul>
                </div>
        </div>
        <main>
            <div id="iG" class="con" >
                <img src="slider.png" alt="" />
                <img src="step_1.png" alt="" />
                <img src="step_2.png" alt="" />
                <img src="step_3.png" alt="" />
                <img src="slider.png" alt="" />
            </div>
        </main>

谢谢。

【问题讨论】：

标签： html css nav sticky

【解决方案1】：

您可以通过添加来解决此问题

body{
 padding-top:100px;
}

你有语法错误

.nav{
 top:o; 
}

应该是

.nav{
 top:0;
}

updated fiddle

【讨论】：