Preventing Overlap of Multiple Fixed Positioned Elements

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/

Prevent fixed element from overlapping

The z-index attribute accepts a number value. Most people use the highest limit as 9999 and the lowest as -9999.

The elements with a higher value will appear above elements with a lower value.

However, you can't place a parent element above a child element with z-index.

#footer {
    z-index: 9999;
}

http://www.w3schools.com/cssref/pr_pos_z-index.asp

---

edit: since your saying you want it to behave like a normal div, try this

#footer {
    position: relative; 
    margin: 20px auto;
}

position:fixed sets an element to a fixed position based on the window (screen size). It always stays where you put it.

Prevent overlap with an absolutely positioned element

I'm not totally sure if I'm understanding, but if you're trying to increase the space between the bottom of the absolutely-positioned navbar and the rest of the content, then you can just add a margin above the first element in the relatively-positioned content, in this case, the <h4> tag around the HTML title:

https://jsfiddle.net/980vfb3o/2/

Hope this helps!

---

Related Topics