Results 1 to 2 of 2

Thread: Relative Positioning

  1. #1
    Join Date
    Jan 2007
    Posts
    33
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Relative Positioning

    Hi all...

    I'm trying to use relative positioning to position an image.

    I have the following code:

    HTML Code:
    <img src="images/copy_white.png" style='position:relative;top:0px;;left:405px;border:none;margin-top:-278px;margin-right:-10px;'>
    As you can see I attempted to make a workaround by using negative margins. This this help some but there is still empty space where the image would go in normal flow.

    Is this a regular occurance with relative positioning or am I doing something wrong? Any other workarounds?

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    It is normal. Relative positioning doesn't take the element out of the flow of the document. It only shifts its position relative to where it otherwise would be. If you want to take the element out of the flow of the document, use absolute positioning. This will place the element absolutely on the page starting from 0,0 (the upper left corner of the page, which can be a hassle getting right for various sized windows, etc.). If you want to use a departure point from within the document, rather than to position absolutely on the entire page, you can use this sort of thing:

    Code:
    <div style="position:relative;height:0;width:0;overflow:visible;">
    <img style="position:absolute;top:5px;left:300px;" src="some.gif">
    </div>
    The division will be in the flow of the page but takes up no layout space. The image will be in relation to the division's position and also takes no layout space.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •