position:fixed when left/top/right/bottom aren't specified - desired results in FF/IE, but not in Safari

Question

Sorry to have to ask yet another position:fixed related question, but reading through various other questions and forum threads hasn\'t helped me with this one.

Answer 1

I had the same requirement, to position an element fixed at it's natural (default) static position with relation to the viewport. I ended up using this simple jQuery function.

function SetFixedPositioning(element) {
    var currentOffset = $(element).offset();
    $(element).css("position", "fixed");
    $(element).offset(currentOffset);           
}

Use it like this:

SetFixedPosition($("#element-to-position"));

My use case was a second level navigation menu that flowed into the document, then was fixed at that position.

Answer 2

I'm seeing similar results in safari 5, and not in safari 6.

across browsers, it seems to work like this:

if one of the position's properties is not defined on a fixed element, the initial value of that property is as the same as if the object was static. it seems.

after page load, it stays behaving as if it was static. so if i fix an element vertically, but not horizontally, i can scroll up and down and the element remains fixed, but if i scroll sideways the elements scrolls along with the page.

but in safari 5, if the element is within an container that has positioning, it seems to behave as you describe: the initial value is the same as if it were static, but afterwards it remains fixed on that position.

your 'side-info-list-fixer' is within 'main-pane', which has position:relative. take that off and you might see the same behaviour as in safari 6 and most other browsers.

i dont know whats correct and wether you should depend on these features ...

$2c, *-pike

Answer 3

I believe the answer you're looking for is as follows...

The position of an element does not default to 0,0. It's position is set by default relative to the containing element, therefor in your example, "#container-1" has a padding-left: 20px whereas the rest of the padding is set to 0 making the "default" position of the element 20px left of the wall of #container-1 and the top is 0px from the top of #container-1.

The default position of this element by default and my viewport not scrolled would be 63px from the top and the left is obviously dependent on the width of your browser. However, if you do not override the top and left, they are already defined by the rendering engine as the top:63px, left:893px.

Then on window resize, that position is adjusted to reflect the position based on the viewport so as you scroll down the position is changed to keep it fixed.

So, by simply adding "position:fixed;" your properties would (as far as the browser is concerned) be as follows:

position:fixed;
top:63px; // defined by default during browser rendering in some browsers (based on scroll position on load)
left:893px; // defined by default during browser rendering in some browsers (based on scroll position / width of browser at time of load)

Also, IE6 and the likes, do not support position:fixed at all. http://fiddle.jshell.net/uaE4g/4/show/

I hope this helps!