Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Fixed position with absolute behaviour

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #26861
    Robin
    Member

    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

    #66827
    Rob MacKay
    Participant

    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.

    #66916
    Robin
    Member

    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?

    #66919
    dcp3450
    Participant

    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.

    #66933
    AshtonSanders
    Participant
    "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)
  • The forum ‘CSS’ is closed to new topics and replies.