将 DOM 元素移动到固定导航栏下方答案

【问题标题】：Moving DOM elements below a fixed navigation bar将 DOM 元素移动到固定导航栏下方
【发布时间】：2013-09-12 13:55:56
【问题描述】：

我有一个固定的导航栏，但是，每当我尝试在它之后创建内容时，内容都会剪辑导航。

我可以通过在内容上使用相对定位来解决这个问题，但我真的不希望这样做。

如何在不使用奇怪的 CSS 策略的情况下将内容推送到固定导航栏下方？

示例导航：

nav{
    position:fixed;
    top:0;
    width:100%;
    border:1px solid black;
}

放置内容类可能会产生误导，本质上，我希望 DOM 元素在导航栏之后流动而不剪切它。例如，想象以下 HTML 出现在 nav 之后：

<section>foo</section>
<p>bar</p>
<h2>fubar</h2>
<div>blah blah blah </div>

我希望看到导航栏之后的部分，然后是部分之后的 p，依此类推。

原始示例问题（不反映问题）： http://jsfiddle.net/wZHcv/

新小提琴： http://jsfiddle.net/4MLVT/

【问题讨论】：

你为什么认为这是一个奇怪的策略？您可以随时添加 padding-top。这通常是你会做的，例如，如果你有带有锚链接的标题。

标签： html css

【解决方案1】：

您可以将 nav 放在 div 中，然后通过 nav 高度设置 div 的高度。这样做的好处：更简单，更有意义，而且在其他地方你可以毫无顾虑地使用其他代码..

<div class="nav-box">
    <nav>
        <ul>
            <li><a href="#">foo</a></li>
            <li><a href="#">bar</a></li>
        </ul>
    </nav>
</div>

EXAMPLE

【讨论】：

+1 因为这是一个很好的建议，但如果 body 的边距不为零，它的行为会很奇怪。（我建议也添加body{margin:0;}）
这是最接近我想要的。

【解决方案2】：

我们应该将导航后的内容包裹在一个div中，并设置position:relative和top大于导航栏的高度。

HTML CODE:
<nav>
   <ul>
     <li><a href="#">foo</a></li>
     <li><a href="#">bar</a></li>
   </ul>
</nav>

<div class="content">
   <section>foo</section>
   <p>bar</p>
   <h2>fubar</h2>
   <div>blah blah blah </div>
</div>

CSS CODE:
nav{
position:fixed;
top:0;
width:100%;
border:1px solid black;
}

nav ul li{
display:inline;
}

nav ul li a{
text-decoration:none;
color:black;
font-size:20px;
-webkit-transition:all .5s;
padding:5px;
}

nav ul li a:hover{
background:black;
color:white;
}
.content{
position:relative;
top:60px;
}

【讨论】：