Grow your CSS skills. Land your dream job.

Fixed position with absolute behaviour

  • # November 20, 2009 at 7:41 am

    Hi there,

    I am creating this nice small and compact jQuery plugin called uiMessage.
    The main purpose of this plugin is to easily show (and auto-hide, if enabled) nice messages to the users of my Ajax’ed web-apps.

    By default, I append this uiMessage div to the body and give it a fixed positioning. This works fine for me.
    Then a friend of mine asked if he could set a custom DOM element to append the uiMessage to. This is where my problem came in.

    If I append this uiMessage div to, for example, the wrapping div (in my case called "#container"), I can’t set the position to fixed because then it will act just the same as it did before.

    Now I want this div to be positioned fixed, so it will scroll along, but position itself absolute so I can position it in any given DIV.

    I hope you understand my problem and can help me fix it. Maybe if my plugin isn’t super-alfa anymore, I will post it as a freebie.

    Thanks in advance,
    Robin

    Rob
    # November 20, 2009 at 9:43 am

    Fixed is always relative to the browser – so I am not sure how you want to position it, but fixed will always stick itself to your browser window.

    # November 22, 2009 at 4:56 pm

    Well, I don’t necessarily want it to be fixed. It just has to behave like it’s fixed. If I take this site as an example, I want the Search box to be where it is right now, but when I scroll down, I want it to scroll along with me. In that way, it’s acting fixed but is nog positioned fixed.

    Do you know what I mean?

    # November 22, 2009 at 6:45 pm

    ok let me see if i can make sense of this. you want the uiMessage to be fixed is some places and absolute in others?

    i’m not sure what your css looks like but how about something like this:

    .uiMessage
    {
    css without any positioning.
    }

    #fixed.uiMessage
    {
    posiiton: fixed;
    }

    #absolute.uiMessage
    {
    position: absolute;
    }

    This is a rough idea/example but this would allow you to have a fixed posiiton when in a fixed div or absolute in an absolute div. Granted I’ve never tried this before nor had the need to try something like this but maybe it can give you a starting point.

    # November 22, 2009 at 10:31 pm
    "Robin" wrote:
    Well, I don’t necessarily want it to be fixed. It just has to behave like it’s fixed.

    lol, that would mean it’s fixed.

    "Robin" wrote:
    If I take this site as an example, I want the Search box to be where it is right now, but when I scroll down, I want it to scroll along with me. In that way, it’s acting fixed but is nog positioned fixed.

    Do you know what I mean?

    So no matter what, you want that search box to be located on the exact same spot in your screen, right? even if I scroll down to the bottom of the page? That is position: Fixed.

    Take this site for example:
    http://www.lovethishatethat.com/c/love/
    When you scroll down the entire left column (and header) doesn’t move. It sounds like you only want one element fixed (as opposed to an entire sidebar), but I think you get the idea. That is position fixed.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".