Header above the page scroll HTML CSS

Question

I'm doing a page with angle and I pass that the header is above the scroll of my page, any idea how I can fix this?

 header { position: fixed; top: 0; z-index: 1; width: 100%; background-color: rgb(0, 0, 0, 0.60); } .element { display: inline-block !important; padding: 5px; color: rgb(255, 230, 194); } .material-icons { font-size: 60px; } 

 <header> <div class="form-inline"> <div class="element"> <i class="material-icons"> change_history </i> </div> <div class="element"> <h3>Formulario</h3> </div> </div> </header> 

and I'd like you to keep the properties that the display:sticky gives you but it's a fixed position to be able to scroll on my page, i would be very much served your help!!

Answer 1

 header { position: fixed; top: 0; right: 0; z-index: 1; width: 100%; background-color: rgb(0, 0, 0, 0.60); height: 88px; } .element { display: inline-block !important; padding: 5px; color: rgb(255, 230, 194); } .material-icons { font-size: 60px; } .mainbox{ height:150px; overflow-y:auto } 

 <header> <div class="form-inline"> <div class="element"> <i class="material-icons"> change_history </i> </div> <div class="element"> <h3>Formulario</h3> </div> </div> <div class="mainbox"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </header>