body is hidden behind fixed nav

Question

I want the fixednav div to butt up against the main div Ive tried to add a margin with % and that helps but I would have to use @media to adjust it as the browser shrinks. Is there a way to get this with css only? and not use 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-->

@j08691 I believe that the problem the OP is facing is beyond an issue with the z-index. — Chris Happy, Aug 14 '18 at 21:49
can you be more clear? Do you want both divs stacked on top of each other? or do you want them to stick to each other side ways — Ashley Fernandes, Aug 15 '18 at 12:27

score 0 · Answer 1 · answered Aug 14 '18 at 20:26

You need a position relative on the .main div.

Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).

— W3Schools

#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-->

@jamesgasrdner Okay, I think I understand what you're trying. Without JS or `@media` CSS tags, the only thing I can think of is to add a scrollbar to `.main`. — Chris Happy, Aug 14 '18 at 21:39

body is hidden behind fixed nav

1 Answers1