html - 身体隐藏在固定导航后面

Question

我希望固定导航 div 与主 div 对接，我尝试使用 % 添加边距，这会有所帮助，但随着浏览器的缩小，我必须使用 @media 来调整它。有没有办法只用css得到这个？并且不使用 jscript

#fixednav{
background-color:#00AFEA !important;
border: px solid blue;
min-height:100px;
position: fixed;
top: 0px;
width: 100%;
z-index:1;box-shadow: 0px 0.5px 0px BLACK;
}

.main {
border: px solid blue;
z-index:2;width: 100%;
margin-top: 5%;
}

<div id="fixednav">
nav goes here and z index is 1 and the content is hidden as this div is covering it up

</div><!--fixed nav-->

<!--fixednav should rest against main not behind it-->



<div class="main">

    content goes here and z index is 2

   </div><!--main--> 

标签： htmlcss

Answer 1

你需要一个相对于.maindiv 的位置。

注意：z-index 仅适用于定位元素（位置：绝对、位置：相对或位置：固定）。

— W3学校

#fixednav{
background-color:#00AFEA !important;
border: px solid blue;
min-height:100px;
position: fixed;
top: 0px;
width: 100%;
z-index:1;box-shadow: 0px 0.5px 0px BLACK;
}

.main {
position: relative;
border: px solid blue;
z-index:2;width: 100%;
margin-top: 5%;
}

<div id="fixednav">
nav goes here and z index is 1 and the content is hidden as this div is covering it up

</div><!--fixed nav-->

<!--fixednav should rest against main not behind it-->



<div class="main">

    content goes here and z index is 2

   </div><!--main-->