CODEWITHSUNDEEP
csshtml
Soarabh
Soarabh

Reputation: 2950

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.

Upvotes: 25

Views: 105925

Answers (10)

Vinish
Vinish

Reputation: 9

I tried many ways not working. finally I found.

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

Upvotes: 0

Vijay Tailor
Vijay Tailor

Reputation: 171

Best solution use:

position: sticky;
top: 0;

Upvotes: 17

Diego Grin
Diego Grin

Reputation: 1

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)*

Upvotes: 0

Victor Bonanho
Victor Bonanho

Reputation: 31

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

Upvotes: 2

fishstick
fishstick

Reputation: 2274

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:

  1. It's easier to make the dummy div height consistent with the header on different devices.
  2. 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>

Upvotes: 1

Starx
Starx

Reputation: 78991

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.

Upvotes: 2

ElaGorilaki
ElaGorilaki

Reputation: 227

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

Upvotes: 0

Jon
Jon

Reputation: 437424

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.

Upvotes: 2

Ben
Ben

Reputation: 7597

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.

Upvotes: 0

Marcel
Marcel

Reputation: 28087

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.

Upvotes: 13

Related Questions