Search code examples
csspositioning

div with `position:fixed`, but stil have same behaviour as with `position:relative`

When working with position:fixed; this is the expected result one would get:

enter image description here

What I actually want to achive is:

enter image description here

as in this result when working with two position: relative; elements

enter image description here

Don't get me wrong, I know how position: fixed or position: absolute works and should behave, how I haven't come around how to get both properties for the same div...

One approach wich works, but isn't a satisfying solution is that I put a position: relative -div below my fixed element, not allowing the second element moving below the fixed element because it is already taken by the extra div.

enter image description here

So I have tried to get this second relative div working with :after or :before pseudo-elements. This doesn't quite seem to work 

div:after, div:before { position: relative; }

it somehow get's mixed up because the element itself is

div { position: fixed }

and turning fixed and relative around obviously also doesn't work because fixed will be bound to the relative - element.

Any ideas?

And if somebody is wondering why I need to use fixed and don't just go with relative : it's for scrolling reasons.

Solution

  • why not use a margin left on the relative div?

    http://jsfiddle.net/q3nQr/1/

    html

    <div id="fixed"></div>
<div id="relative"></div>

    css

    #fixed { position: fixed; width: 60px; height:100px; background: red;  }

#relative { position: relative; width: 300px;height:1000px; background: green; margin-left:65px; }

    UPDATE

    Take a look at the w3 spec for static positioning (just read the first two paragraphs).

    http://www.w3.org/wiki/CSS_absolute_and_fixed_positioning

    Absolutely positioned elements are removed entirely from the document flow. That means they have no effect at all on their parent element or on the elements that occur after them in the source code. An absolutely positioned element will therefore overlap other content unless you take action to prevent it. Sometimes, of course, this overlap is exactly what you desire, but you should be aware of it, to make sure you are getting the layout you want!

    Fixed positioning is really just a specialized form of absolute positioning; elements with fixed positioning are fixed relative to the viewport/browser window rather than the containing element; even if the page is scrolled, they stay in exactly the same position inside the browser window.

    This means that elements with fixed or absolute positions do not associate with any other elements in the document, this means they cannot effect the width of another element. If the width of the static element is not known, I think you will need manipulate the DOM with javascript; something as simple as (jquery, not tested):

    var staticwidth = $("#static").width();
$("#relative").css('margin-left', staticwidth + 'px');