DHTML Lab - DHTML Diner - Element Page Coordinates, Part 4 | 6

Determining Element Page Coordinates, Part 4
IE Win - Final Comments

Bordered Relatively-Positioned Elements

Relatively-positioned elements behave similarly to static elements as far as defining layout is concerned.
If a width or a height is specified, the element has layout and is part of the page's element offset hierarchy.

On this page, the red square is nested in a relatively-positioned element.

Move the blue square.

Disabled  Disabled

<DIV STYLE="position:relative;
            border:5px green solid;
            width:230px;
            padding:10px;>
    <IMG ID="redbox"
         SRC="redbox.gif"
         WIDTH="200" HEIGHT="200">
&lt/DIV>
        

Result

The results are the same as with static-elements-with-layout and absolutely-positioned elements. We need to account for the border width to correctly position the blue square

Now, what about relatively-positioned elements without layout?