CSS Fixed Positioning
When you want to keep an element in the same spot in the viewport no matter where on the page the user is, CSS's fixed-positioning functionality is what you need.
The CSS
.element { position:fixed; top:2%; right:2%; }
Above we set our element 2% from both the top and right hand side of the viewport. You can scroll on the page forever but our element will still stick to the specified 2% mark. You can see fixed positioning in effect on the Facebook website (chat toolbar).
Discussion
Be Heard!
Share your thoughts with fellow developers of all skill levels! I want to hear from you!
facebook works in ie6 tho, your example doesnt. would be awesome if you could provide the workaround as well.
thanks!
maybe this will help you http://tagsoup.com/cookbook/css/fixed/
nice short article.
I think Gmail/Other Google Products do that too when they are loading something via ajax, they put one of those in the corner of the screen.
To fix this in <= ie6 requires using position: absolute instead of position:fixed.
html, body {
height: 100%;
overflow: auto;
}
body .element {
position: absolute;
bottom: 0;
}
Then you can use:
body > .element { position:fixed;}
so that browsers > IE6 will work properly.
Jestep, that solution will only work if you’re not using any REAL absolutely positioned elements on your page – they’ll just end up as position:fixed;. IE6 really sucks!
http://www.gunlaug.no/contents/wd_additions_15.html
I usually use this technique to get things to be fixed in IE6~
@Sam, you’d be surprised how easy the FB workaround is: 1) add a class to the HTML that removes overflow; 2) inject an extra wrapper that has width and height of 100%, overflow and relative position; 3) make the “presence bar” absolute positioned.
Another option is to play with _property: expression(“…”), but you risk crashing the browser.
@Jestep, why not use a shorter hack e.g. _position:absolute ;)
Now when I think of it, this could be a very small plug-in — just a concept.
1) On document.ready create a dummy element; 2) change position to fixed and bottom to 0;
Now having in mind that the initial position is static and unrecognized property values result into default value, thus if fixed is unsupported the value will remain static
3) check for bottom offset 4) if it is 0, the position:fixed is supported, if not use the above mentioned fix; 5) delete the dummy element.
Not to throw a spanner in the works, but with progressive enhancement in mind, we shouldn’t worry about our websites looking the same in all the browsers…. On top of that, we really need to start moving away from IE6, otherwise it will never disappear.
The problem with IE6 is that it will be supported by Microsoft until 2010 plus it is used (as far as I know) as a primary browser within most business organsiations, and usually (for some baffling reason) their IT departments are reluctant to upgrade to better browsers
people love to hate ie6, but the thing is, because its such a problematic browser, there are stacks of talented people coming up with workarounds, fixes, etc for it.
IE6 has 20% of browser users still. def worth paying attention to.
Posiiton fixed is something I try to avoid as much as possible because of the IE6 issue. If you have a good workaround let me know!
I searched for “Unsupported value: “fixed’” and reached here.
Thanks… this makes an idea of my problem.
-Mahmud
Mohammad Mahmud Kabir
http://www.MahmudKabir.com