How to make absolute positioned image "liquid"? (8 posts)

  1. virg
    Posted 5 years ago #

    I have an image set to absolute but when I resize the page, the image doesn't move with the rest of the elements. Is there a way to make it liquid?

  2. Rev. Voodoo
    Volunteer Moderator
    Posted 5 years ago #

    you have a link to your site?

    absolute is by nature not flexible....
    its absolutely positioned to a containing box.....either whatever its nested in that has a position:relative attribute, or else the edge of your monitor

  3. Jared Atchison
    Posted 5 years ago #

    It depends where on the page you are trying to put it and which parent element is assigned position:relative (as mentioned above).

    Post the URL.

  4. virg
    Posted 5 years ago #

    Thanks! Here's the page where I'm testing it http://www.graphictask.com/?page_id=2 It's the WordPress logo. I'm using absolute positioning for it because everything else has margins and properties that pushes over other content. The logo will be very close to text.

  5. wizardregis
    Posted 5 years ago #

    position:absolute's are always positioning themselves to the closest position:relative, and in case no one is assigned it align itself to the body. Simply make a new container in which area you want the image (like .post for example) and add position:relative; to it.

  6. virg
    Posted 5 years ago #

    Thanks WizardRegis! It finally makes sense. But how would I align the absolute image to center? When I try top, left, or right it looses it's liquid. So I tried in the div,


    but it doesn't work..

  7. AlethiaPak
    Posted 5 years ago #

    i would use relative rather than absolute for <div class="absolute">.

    .absolute {

    you can play with top and right. see what will fit you best.

  8. virg
    Posted 5 years ago #

    Nvm, I figured it out. Had to define a width :)

Topic Closed

This topic has been closed to new replies.

About this Topic


No tags yet.