Voorbeeld code:
<body>
<div class="overlay"></div>
<div class="header">
<ul>
<li>Lorem</li>
<li><input type="text" placeholder="Search here"></li>
<li>Ipsum</li>
<li>Dolor</li>
</ul>
</div>
<div class="contentwrap">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus cursus odio nec sollicitudin. Aenean volutpat tristique tristique. Donec vitae libero vel sapien euismod egestas nec quis mi. Fusce semper lectus augue, cursus suscipit ex volutpat id. Donec interdum, sapien quis mollis sagittis, ligula turpis eleifend enim, a vulputate nibh est nec nibh. Nam tincidunt eleifend neque eget bibendum. Quisque diam leo, dapibus sit amet ipsum ac, auctor finibus erat. Morbi pulvinar imperdiet nibh, nec ullamcorper magna congue a. Mauris volutpat eget odio scelerisque sollicitudin. Maecenas odio dui, posuere eget orci dictum, ullamcorper ultricies leo. Vivamus risus dolor, viverra vel libero et, posuere tempus augue. Pellentesque a posuere arcu, a condimentum mi. Integer viverra rhoncus pretium. Morbi sit amet porttitor eros, non gravida dolor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec purus lorem. Nulla vestibulum vestibulum est, ut sollicitudin diam maximus ac. Nulla suscipit sem eu efficitur placerat. Pellentesque vitae risus et velit iaculis ullamcorper. Phasellus venenatis iaculis leo in viverra. Nunc finibus dignissim libero at mattis. Aenean lacinia dapibus erat id varius. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque in nunc ac lectus tempor cursus a sit amet dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
Cras sed lectus molestie, ultrices diam in, scelerisque elit. Morbi viverra pulvinar nunc luctus venenatis. Quisque porttitor id magna vel tempus. Donec ultrices mi scelerisque blandit pretium. Curabitur et varius turpis, ut gravida risus. Nullam pharetra turpis lectus, eget aliquam elit mattis a. Donec vel hendrerit mauris. Proin auctor sagittis venenatis. Etiam semper purus eu velit feugiat vestibulum. Integer a ultrices ligula. Phasellus tincidunt dapibus magna vitae sodales. Integer at accumsan diam. Vestibulum a dolor tortor. Maecenas enim elit, semper ac sagittis nec, venenatis a felis. Duis ac congue risus. Pellentesque nisi turpis, mattis nec dictum quis, vehicula eu neque.
Proin ultricies leo eget dolor consectetur imperdiet. Duis mattis at erat rutrum lobortis. Proin et turpis non velit consectetur egestas. Aenean rutrum, elit eget porttitor volutpat, est sem dapibus libero, vel tincidunt lectus risus ut nisi. Suspendisse ut ipsum luctus, mollis ipsum laoreet, sagittis purus. In augue turpis, euismod non vulputate quis, finibus a ligula. Donec suscipit, magna a euismod commodo, enim turpis molestie nunc, non porta purus nisl eu diam. Nam porta finibus elit, nec rhoncus est bibendum at. Nunc et tincidunt nibh. Aliquam mollis tortor nec erat suscipit, at elementum enim lobortis. Nullam augue nibh, porttitor ut vulputate ut, condimentum rutrum erat. Aliquam id euismod nisi.</p>
</div>
</body>
CSS:
.overlay{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background-color: rgb(189 189 189 / 60%);
}
.contentwrap{
height:2000px;
position:relative;
}
.header{
position:fixed;
border:1px solid red;
background-color:#fff;
}
.header ul{
display: flex;
}
.header input{
z-index:2;
}