SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    Vancouver,BC
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question a question about offsetParent?

    I use offsetParent to locate my div tag, but I find in the following case, the div position on the screen the same, but they have different offsetParent.
    case 1:
    ....
    <table>
    <tr><td>...</td></tr>
    <tr><td>
    <div id="test"></div>
    </td></tr>
    </table>
    ....

    case 2:

    ....
    <table>
    <tr><td>...</td></tr>
    <tr><td>
    <div id="test" style="position:relative;top:0;left:0;"></div>
    </td></tr></table>
    ....

    it seems to me when you use relative psotion, and you set left and top to 0, the div stay the same place as it is in normal flow. But in the case 1, the offsetParent is the td, in case 2, the offsetParent is the body. It doesn't look right, in the case 2, if the offsetParent of the div is the body, it should position relative to the body, that means the top left corner of the window in my case.

    Any idea?

    Thanks.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I don't know about javascript and offset parent but I can advise you on how css see things

    When you place an object with position:relative and use left:0 and top:0 then you are in fact not moving it anywhere as you rightly stay.

    However yoyu are creating a stacking context for nested elements and for the element itself.

    The parent of a positioned element is the nearest ancestor that has a value defined for the property position.

    Therefore the parent of the relative element in your page will default to the html root element (the body outside of margins).

    To make the td the parent then the td needs to have position:relative set also and then it will become the parent for the relatively placed div.

    Code:
    <table>
    <tr><td>...</td></tr>
    <tr><td style="position:relative">
    <div id="test" style="position:relative;top:0;left:0;"></div>
    </td></tr></table
    Positioned elements and static elements are obviously treated differently once you add positioning propeties to them.

    I assume the same may hold true for offsetParent but thats not my area so perhaps someome else will confirm.

    Paul

    Edit:


    Have a look here it seems to confirm my suspicions.:
    http://msdn.microsoft.com/library/de...de04032000.asp
    Last edited by Paul O'B; Sep 19, 2004 at 03:28.


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
  •