css - Content hides behind header after used HTML anchor tag -

css - Content hides behind header after used HTML anchor tag -

i have little problem here cannot prepare it.

i doing 1 page website, have 3 links on navig bar, click in 1 of them should scroll downwards especific div, , does. goes behind fixed header set.

html

<div class="header1"> .... blablabla... </div> <div class="navigbox"> <div class="navig"> <a href="#intro">about</a> </div> </div> <div id="intro"> text </div>

css

.header1{ height: 20%; width: 100%; position: fixed; z-index: 1; left:0; right:0; top: 0; margin-left:auto; margin-right:auto;} .navigbox{ background: white; position: fixed; z-index: 1; height: 10%; width: 80%; left: 10%; top: 20%;} .navig{ height: 100%; width: 33.33%; float:letf;} #intro{ background: white; height: 60%; width: 70%; left: 10%; top: 30%; position: absolute; padding: 5% 5% 0 5%;}

that's because height of header isn't considered when page scrolls. instead of applying id div itself, set element, a, before , seperate 2 couple br's.

edit: this answer has improve way of doing it.

html css scroll