O'Reilly

CSS Fixed Positioning

By on  

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).

Track.js Error Reporting

Upcoming Events

Recent Features

  • Write Better JavaScript with Promises

    You've probably heard the talk around the water cooler about how promises are the future. All of the cool kids are using them, but you don't see what makes them so special. Can't you just use a callback? What's the big deal? In this article, we'll...

  • Send Text Messages with PHP

    Kids these days, I tell ya.  All they care about is the technology.  The video games.  The bottled water.  Oh, and the texting, always the texting.  Back in my day, all we had was...OK, I had all of these things too.  But I still don't get...

Incredible Demos

  • PHP / MooTools 1.2 Accordion Helper

    The MooTools Accordion plugin seems to be the plugin that people seem to have the most problems with. It's an awesome plugin, so I can see why so many people want to use it, but I think that may be part of the problem....

  • CSS Vertical Center with Flexbox

    I'm 31 years old and feel like I've been in the web development game for centuries.  We knew forever that layouts in CSS were a nightmare and we all considered flexbox our savior.  Whether it turns out that way remains to be seen but flexbox does easily...

Discussion

  1. sam

    facebook works in ie6 tho, your example doesnt. would be awesome if you could provide the workaround as well.
    thanks!

  2. Webling

    maybe this will help you http://tagsoup.com/cookbook/css/fixed/

    nice short article.

  3. 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.

  4. 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.

  5. 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!

  6. http://www.gunlaug.no/contents/wd_additions_15.html

    I usually use this technique to get things to be fixed in IE6~

  7. @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 ;)

  8. 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.

  9. 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.

  10. 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

  11. sam

    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.

  12. 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!

  13. 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

  14. can fixed-position after scroll and find div ?

  15. Jake Wood

    Just wondering how to make a page default to the left until the window is a certain size, and then become centered, i.e. facebook. The facebook logo is set left justified, until the window is big enough for all the menu items to be visible, then the page becomes centered.

  16. Angelica

    The codes worked but there’s one problem, the background of the timer we did is not moving together with the timer’s text. It is left at the top so what happen is that the only fixed element is the timer’s text not its background. How can I solve it? here’s the code.
    .#apDiv1{ position:fixed;}>

  17. Juan Paolo Escopete

    I got a problem how can I put the fixed positioned div always aligned to the body… coz I got the body centered and when I zoom out the fixed positioned div stays on the upper left corner of the screen.

  18. helpful post, thanks for solved my problem.

  19. Unfortunately this doesn’t work on some mobile browsers. However it does on the Kindle of all things.

  20. This was just what I needed, thank you very much for your post.

  21. Tom

    Position: fixed will result in content overlaps when zooming. Is there a way to fix that?

  22. Perfect! Thanks!

  23. balu

    Hi ,

    Nice one

    for example

    .right{position:fixed; top:5px; right:5px; } it will display in right side of webpage..

    .left{position:fixed; top:5px; left:5px; } it will display in left side of webpage..

  24. anon

    As an advertiser I love this feature much more than pop-up adverts, but I have learned from pop-up ads: you have to keep the levels of annoyance below what most people will accept else you will have to stop doing what you want.

    position: fixed is great because you can use it to float commercial messages in people’s faces but they can’t do much about it: browsers have pop-up blockers, but not position:fixed blockers. Even totally amateur sites use this for commercial purposes, floating twitter, FB icons etc. in their visitor’s faces. It seems few people have thought this through, the commercial messages and hype seems to have wonderfully side-tracked people.

    Best of all though is when people use p:f to recreate frames. But even better than frames the keyboard can’t be used properly to scroll the page, floating elements stand to obscure content. But that just makes the web harder to understand, which tends to be good for business. Bad for the people, but who cares about them? Rich and poor are relative after all, and I’m not going to work to get rich. But I’ll try and push others towards poverty.

  25. awesom, thanks a lot.

  26. really a nice tut to move the div…. i have done it by jquery earlier … lol…… now i will move it with the help of css only.

  27. This is super helpful, thank you! I am however having some issue with the:

    sb.css({position: 'fixed', bottom: '10px', right: '10px'});   
    

    It makes the sb (sidebar object from jquery) fatter than it was …

  28. Sharath

    This is helpful, but i have a question on problem caused by fixed position. the next div just overlapps with this one. anyway to fix it?

  29. Position: fixed will result in content overlaps when zooming. Is there a way to fix that?

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Recently on David Walsh Blog

  • Free Download: Font Bundle Featuring 17 Incredible Typefaces

    The only thing we love more than a good font, is a good free font. So we’ve combed the Web for some of our favorite free fonts, and gathered them here in a single download. You’ll find a variety of useful typefaces, from highly geometric designs...

  • OâReilly Velocity Conference â Amsterdam

    My favorite front-end conference has always been O'Reilly's Velocity Conference because the conference series has focused on one of the most undervalued parts of client side coding:  speed.  So often we're so excited that our JavaScript works that we forget that speed, efficiency, and performance are just as important. The next Velocity...

  • CanIUse Command Line

    Every front-end developer should be well acquainted with CanIUse, the website that lets you view browser support for browser features.  When people criticize my blog posts for not detailing browser support for features within the post, I tell them to check CanIUse:  always up to date, unlike...

  • Generating Alternative Stylesheets for Browsers Without @media

    If your CSS code is built with a mobile-first approach, it probably contains all the rules that make up the "desktop" view inside @media statements. That's great, but browsers that don't support media queries (IE 8 and below) will simply ignore them, ending up getting the...

  • Serve a Directory with PHP

    Many developers have a giggle at PHP, even looking down at the language, but let's be honest:  most of our blogs are powered by it (WordPress) and it's a great language to dabble around with.  I cut my teeth on PHP, though I prefer to avoid PHP these days. But...