HTML5 header tag overlaps the contents below it

Question

 header{ width:100%; background-color: #607D8B; color:#8BC34A; font-size:200%; padding: 15px; position: fixed; z-index: 999; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } .image{ width: 100%; } body { height: 1200px; } 

 <header> <div class="row"> <div class="col-md-6 name">Aayushi </div> <div class="col-md-2 about">About</div> <div class="col-md-2 experience">Experience</div> <div class="col-md-2 contact">Contact</div> </div> </header> <div class="col-md-12 col-xs-12 row div2"> <div class="col-md-8 col-xs-8"> </div> <div class="col-md-4 col-xs-4 image-div"> <img src="https://www.w3schools.com/css/trolltunga.jpg" class="image col-md-12 col-xs-12"> </div> </div> 

I am implementing a basic header whose position I am specifying as position:absolute then it overlaps the content below it.

Why does this happen? Even if I add the class navbar-fixed-top to my header then it overlaps the content below!

If I want to fix my header then what should I do? The codepen link is https://codepen.io/asinha/pen/MJZooj

<header>
    <div class="row">
        <div class="col-md-6 name">Aayushi </div>
        <div class="col-md-2 about">About</div>
        <div class="col-md-2 experience">Experience</div>
        <div class="col-md-2 contact">Contact</div>
    </div>
</header>
<div class="col-md-12 col-xs-12 row div2">
    <div class="col-md-8 col-xs-8">

    </div>
    <div class="col-md-4 col-xs-4 image-div">
    <img src="image.jpg" class="image col-md-12 col-xs-12">
    </div>
</div>

header{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index:10;
    width:100%;
    background-color: #607D8B; 
    height:10vh;
    color:#8BC34A; 
    font-size:200%;
    padding-top: 0.3em;

}

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}

.image{
    width: 100%;
}

.div2{
    margin-top:14%;
}

Answer 1

This happens because when you give an element a position of fixed , that element is then positioned relative to the browser window; and when you give an element a position of absolute , that element is then positioned relative to the nearest parent without position: static (which I believe is the "default" position value for elements in most browsers).

https://www.w3schools.com/cssref/pr_class_position.asp

It's hard to know exactly why without a demo to work with, but i'm assuming the issue is because the header's content/children end up overflowing the header's height. Even though you've given your header a fixed height of 10vh , if one resizes the browser whereby the header's width gets smaller, eventually a height: 10vh might not be tall enough to contain all of header's content, thus it overflows. To test this and find out if the content is overflowing the header, you can apply a border to header and mess around with it.

An incredibly simple solution so that your header doesn't overlap your the websites content would be to move the header lower in the z-index by applying header { z-index: -1; } header { z-index: -1; } or .div2 { z-index: 1 } . But I imagine this isn't what you're looking for.

In your codepen, the reason your header is overlapping div2 is because -- as I had already stated -- the height of the header is increasing to accomodate its overflowing content since you haven't applied a height to header .

What you can do is apply a fixed height to header and apply these properties and values to div2 : position: absolute and top: the height of the header VH .

https://codepen.io/tOkyO1/pen/EXgOBp?editors=1100

As you scroll down the page, the image will, again, end up being hidden by the header; but you can't avoid this unless you fix the image too... If you don't care if the image floats over the header, then do the z-index thing which i talked about above.

If none of this is what you're looking to do. I'm sorry but I won't be able to help you until you figure out exactly what it is that you want to do. I've wasted enough time trying to figure out what you want to do.

Answer 2

That's because contents positioned absolutely or fixed don't affect any other element on the page.

Switch your css to this and it looks better IMO

header{
    width:100%;
    background-color: #607D8B; 
    color:#8BC34A; 
    font-size:200%;
    padding: 15px;
    postion: fixed;
    z-index: 999;

}

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}

.image{
    width: 100%;
}

.div2{
    margin-top:14%;
}

I removed the headers height and position property. No need to fix something to the top of the page which will already go there by default. And the height property caused it to not fully contain its contents. If you are going to give it a height, probably better to used min-height in this case so it can stretch with its content.

The text inside could be raised or lowered with line-height , but I just used padding to more easily center it.

Answer 3

I believe the 'overlap' problem you have is from the links contained within the header, which overlap due to the fact that you have assigned a height of 10vh to your header. vh is a unit relative to viewport height, and adjusts according to the screen.

Simply removing your height declaration will fix this problem, and allow your header to automatically expand to the height of the elements contained within.

I've created a Bootply showcasing this here .

Alternatively, you could shrink the size of the font, which have a font-size of 200% .

Hope this helps! :)