53

Say I have three divs:

<div id="outer"></div>
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>

#one {
  position:fixed;
  top:0px;
  left:0px;
}

#two {
  width: 80%;
  height:500px;
}

#three {
  width: 80%;
  height:500px;
}

Divs "two" and "three" appear to be overlapped by div "one" because of position fixed.

1) What is the best way to make it such that they do not overlap?

2) What is the best way to make it such that my fixed div takes up 100% of the height, even if the user scrolls down? (like a sidebar, preventing any new divs that i want to run along the same side as divs two and three) Does the best way involve floats for #two and #three?

João Pimentel Ferreira
  • 14,289
  • 10
  • 80
  • 109
Rolando
  • 58,640
  • 98
  • 266
  • 407
  • Can you not specify the "top" property separately for each div? – Learner Jun 05 '13 at 21:35
  • 2
    No, I want them to naturally not overlap each other. (for divs two and three) – Rolando Jun 05 '13 at 21:36
  • In that case why don't you use relative positioning? – Learner Jun 05 '13 at 21:37
  • 1
    I want to make it such that the fixed div will stay put while the user scrolls down with the page, while the #two and #three divs stay put to the right of #one, no matter what content is in them. Before I had fixed positioning, I would float left for two and three. But it seems to go haywire with #one being position:fixed. I would prefer to have both fixed and float:left if possible.. if not thats okay, as long as it maintains the desired behaviour (without declaring tops, position absolute, etc for #two and #three) whatever the best way to go about this is. – Rolando Jun 05 '13 at 21:38
  • 100% height with display absolute is simple, just `top:0;bottom:0;` – RaphaelDDL Jun 05 '13 at 21:43
  • @RaphaelDDL If your referring to #one, it does not cause it to scroll with the page, which is what I want. – Rolando Jun 05 '13 at 21:56
  • The reason the overlapping occurs is due to your content `div` elements remaining in normal flow, while the `div` with `position: fixed` is taken out of `normal flow`, see #3 [here](http://www.w3.org/TR/CSS2/visudet.html#containing-block-details). – Joey Jun 05 '13 at 22:04

4 Answers4

24

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

#one{
 position: sticky;    
}
Chetan J Rao
  • 905
  • 9
  • 14
12

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/

iambriansreed
  • 21,935
  • 6
  • 63
  • 79
7

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.

enter image description here

João Pimentel Ferreira
  • 14,289
  • 10
  • 80
  • 109
-9

There is no way for this to be fixed, so all we can do is wait for now...

Thank me later

user16537394
  • 21
  • 1
    Hi user16537394 welcome stackoverflow. First of all, please check the thread if there is an accepted answer. Secondly, please don't be over done with the asked questions even it is not fixable, please refer a link to suggest that. Doing so, one question can be answered by somebody else. Thank you. – Cafer Yükseloğlu Aug 02 '21 at 16:56