Position Fixed Content Overlapping Problem

Position fixed content overlapping problem

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.

Content overlapping with position:fixed

Give the div with position:fixed property top:0 and the .content div margin-top:50px (the height of the fixed .header div) :

Example

css position:fixed overlapping

If you position an element with:

position: absolute; or
position: fixed

this removes the element from the document flow which means, as you've noticed, that all other elements will ignore that out-of-flow positioned element and appear over the top of it etc.

You can use padding and margin on other elements to ensure that they don't overlap the out-of-flow positioned element.

Working Example:

nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 120px;
  padding: 12px;
  color: rgb(255, 255, 255);
  background-color: rgb(0, 0, 127);
}

main {
  margin-left: 156px;
}

<main>
  <h1>Main Page</h1>
  <p> This is the main part of the page.</p>
  <p>It has a <code>margin-left</code> of <code>156px</code>.</p>
</main>

<nav>
  <h2>Navigation</h2>
  
  <ul>
    <li>Page 1</li>
    <li>Page 2</li>
    <li>Page 3</li>
    <li>Page 4</li>
    <li>Page 5</li>
  </ul>
</nav>

How to prevent fixed positioned element overlapping others elements in css?

1:

By adding margin-left you can make sure that long fixed div doesn't overlap the others.

#two, #three {
    margin-left:20%;
    width:80%;
    height:500px;
}

2:

Adding the bottom:0px; makes it the height of the window because it expands from the top to the bottom.

#one {    
    position:fixed;
    top:0px;
    bottom:0px;
    left:0px;   
    width:20%; 
}

Note: I also added a flexible width of 20% to the #one div so that it plays nicely with the other two flexible width divs.

Fiddle: http://jsfiddle.net/ZPRLd/

position: fixed overlapping page

Wrap your content with div and give it the margin-top to the same height as your fixed content.

SEE DEMO HERE

HTML

<div id='top'>Kitchen List</div>
<br />
<div class="container">
    <input type='text' id='input'>
    <button id='click'>Add</button>
    <ol></ol>
    <div id='error'>Please enter a grocery item
        <br />
        <button id='eb'>Close</button>
    </div>
</div>

CSS

.container {
    margin-top: 50px;
}

Fixed div overlapping content?

Just replace fixed with sticky. Please modify the code like below and see that works for you:

.contain {
/*     margin-bottom: 35rem; */
}
.data {
    background-color: red;
    border: 4px solid black;
    width: 30%;
    bottom: 30%;
    position: sticky;
    height: 300px;
}

.data1 {
    width: 30%;
    height: 500px;
    margin-left: 60%;
    background-color: black;
}

.footer {
    background-color: blue;
    width: 100%;
    height: 350px;
    bottom: 0;
}

Stop overlapping when position fixed

Add the class col-sm-offset-7 to the col-sm-5 element.

When you make an element's position absolute or fixed, it is removed from the flow of relative and static elements, thus vacating its space in that flow, allowing subsequent elements to "move up" (or left in your situation) in its place.

Assuming you're using Bootstrap, your col divs are floated left so when you make the col-sm-7 fixed, it gets pulled out of the flow making the col-sm-5 float all the way to the left where the other element used to be before being removed from the flow.

Position Fixed Content Overlapping Problem