HTML CSS examples for CSS Widget:Header
Sticky header during the scroll
<html> <head> <style> .header {<!-- w w w.j av a2 s .c o m--> background-color: #ccc; width: 100%; position: fixed; top: 0; bottom: auto; } .outer { background-color: #fff; position: relative; height: 100px; } .outer .banner { font-size: 46px; } .outer .header { position: absolute; bottom: 0; z-index: 2; top: auto; } .content { height: 1500px; color: blue; background-color: #fff; margin-top: 100px; } </style> </head> <body> <div class="header"> Header </div> <div class="outer"> <span class="banner">LOGO</span> <div class="header"> Header </div> </div> <div class="content"> So </div> </body> </html>