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

Solution 1:

By changing the position from position: fixed; to position: sticky; solved my problem.

#one{
 position: sticky;    
}

Solution 2:

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/

Solution 3:

You can use the CSS z-index property. It worked fine on me!

#one{
  z-index:0
}
#two, #three{
  z-index: 1;
}

Since the z index of #two and #three are higher than #one, they will be on top when there is an overlapping. You may select any other integer values, as long as one index is higher than another.