My issue involves a fixed div position with a margin from the top of the page. When I scroll my page, the content of my relatively positioned div (containing page content) is visible under the fixed div due to the margin from the top of the page. Despite searching extensively on Stack Overflow and trying various solutions such as adding padding to the body or HTML, as well as adjusting margins and paddings for my relative div, none of these have resolved the problem. The content remains visible and I am reluctant to resort to using JavaScript or altering padding for the body or HTML elements. I have referenced similar questions including: link1, link2, link3 and link4. Here is a snippet of my HTML code:
<section class="all-result">
<div class="nav">
...
</div>
<div class="results">
.....
</div>
</section>
And here is a sample of my CSS code:
.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;
}