Question

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

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

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

示例导航：

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

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

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

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

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

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

Answer 1

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

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

EXAMPLE

Answer 2

我们应该在导航后在div中包装内容并设置位置：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;
}

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

2 个答案: