hide content of page when scrolling under a fixed div position

Question

i have a fixed div position which has a margin from top of page,when i scroll my page the content of my relative position div (which has page content) is visible under a fixed div ( i can see the scrolling content because my fixed div has margin from top of page). i have searched a lot in stack overflow and try every solutions like give padding to body and Html or give margin or padding to my relative positioned div but none of them work for me.and still the content is visible.I don't want to use java scripts and also don't want to use padding for body or Html. i see these questions for example but don't work for me: link1,link2 ,link3 and link4. my html code is look like:

<section class="all-result">
  <div class="nav">
   ...
  </div>
   <div class="results">
    .....
   </div>
</section>

and css look like :

.all-result{
 position:absolute;
 background: #fff;
 overflow-y: scroll;
 overflow-x: hidden;
 z-index: 4;
 right: 0;
}
.nav{ 
  position:fixed;
  margin-top:40px;
  z-index:1000;
  }
.results{
 width:100%;
 height:100%;
 position:relative;
 }

score 0 · Answer 1 · answered Jun 17 '17 at 08:52

Here i added an example,somewhat i think you looking for.

body{ overflow-y: scroll;}
.all-result
{
 position:absolute;
 width:100%;
 height:3000px;
 overflow: hidden;
 z-index: 4;
 background:#759A97;
}
.nav{ 
  width:100%;
  height:40px;
  position:fixed;
  margin-top:40px;
  z-index:1000;
  background:#B9B9B9;
  }
.results
{
 top:100px;
 height:300px;
 position:relative;
 background:#9A8975;
}

<!DOCTYPE html>
<html>

<body>

<section class="all-result">
 
 <div class="nav">
 
  </div>
   <div class="results">
    Page Content
   </div>

 
</section>

</body>
</html>

hide content of page when scrolling under a fixed div position

1 Answers1