'Position fixed content overlapping problem

This is my html5 markup

<div id="header">
</div>
<div id="content">
</div>
<div id="footer">
</div>

Now used css

header {
  height: 95px;
  position: fixed;
  width: 100%;
  min-width: 980px;
}

footer {
  background: #000000;
  bottom: 0;
  height: 30px;
  position: fixed;
  width: 100%;
  min-width: 980px
}

Now my problem is when i put any content inside

<div id="content">
</div>

The content comes from top:0 which is not required. I dont want to use padding or margin top over content. Is there any way from which content comes below header.

css html

Solution 1:^[1]

The main reason is because the <header> is position:fixed taking it out of the document flow. You'll need to add margin or padding to either the <body> or your <content>(??) element. Also, if using HTML5 elements, add this to the top of your CSS rules for compatibility with older browsers.

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}

Taken from Eric Meyer's CSS Reset.

Solution 2:^[2]

You don't mention any other layout requirements you may have, but this would be a good start

content {position: relative; top: 95px}

Update

As the other good people state, <content> is not a valid HTML5 tag. Maybe it doesn't have to do with the specific question, but do follow their advice and avoid rolling your own tags. Use a standard one instead.

Solution 3:^[3]

Follow those HTML5 tags, that are present. If you going to create your own, then that might have consequencies.

Here follow this.

<header>
</header>
<section>
</section>
<footer>
</footer>

To learn about valid HTML5 tags please follow this link.

Solution 4:^[4]

I tried many ways not working. finally I found.

.fixed-header{
     position: fixed;
     z-index: +1;        // Header comes front
}

Solution 5:^[5]

I'm assuming you don't actually mean <content>, as that isn't a valid HTML5 tag. Anyway, the problem you're seeing is down to the position: fixed directive for your <header> element. Try removing that and going from there.

Solution 6:^[6]

If other solutions don't work, check that your background/background-color is not transparent, and set it to white.

Solution 7:^[7]

So for what I get from this question, you are trying not to overlap stuff, you could use z-index inside your div's css:

.example {

    position: absolute;

    z-index: -10;

}

z-index only works on positioned elements (position:absolute, position:relative, or position:fixed)

Solution 8:^[8]

I'm recently working on this topic and here is an implementation I found by inspecting Dropbox's job website.

They use a dummy div right after the fixed header and set the height of this div the same as header's.

Personally I prefer this solution as:

It's easier to make the dummy div height consistent with the header on different devices.
I can layout the content part as if the fixed header doesn't exist, which makes more sense to me.

Here is a demo:

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

header {
  position: fixed;
  width: 100%;
  height: 150px;
  background-color: aliceblue;
  opacity: 0.7;
}

section {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.header-dummy {
  height: 150px; /* this height SHOULD always be at least the same as header's */
  background-color: chartreuse;
}

#content {
  background-color: orange;
}

footer {
  background-color: dodgerblue;
}

<header>
  <section>
    <div>
      <span>HEADER TEXT</span>
    </div>
  </section>
</header>
<div class="header-dummy"></div>
<div id="content">
  <h3>Content are not Impacted</h3>
  <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>
  <h3>Content are not Impacted</h3>
  <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>
  <h3>Content are not Impacted</h3>
  <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>
  <h3>Content are not Impacted</h3>
  <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>
  <h3>Content are not Impacted</h3>
  <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>
  <h3>Content are not Impacted</h3>
  <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>
  <h3>Content are not Impacted</h3>
  <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>
  <h3>Content are not Impacted</h3>
  <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>
<footer>
  <span>I'm just a footer</span>
</footer>

Solution 9:^[9]

I had the same problem and it is reaaaaly simple. Just use --> position: sticky;

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2
Solution 3
Solution 4	Vinish
Solution 5	Ben
Solution 6	ElaGorilaki
Solution 7	Diego Grin
Solution 8	fishstick
Solution 9	Victor Bonanho

'Position fixed content overlapping problem

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]

Solution 9:[9]