jQuery position() example should be corrected or it's ok?

[ir.net]

It's supposed that this page should show position of a child element relatively to its parent.

http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_css_position2

 

The challenge is it shows position relatively to positioned parent or body as I suppose.

I mean that currently "Position of this paragraph (relative to its parent element) is 151 top and 159 left."

instead of "... 100 top and 100 left."

 

May be paragraph's text "(relative to its parent element)" should be changed or 'position:absolute' should be added to parent's style to avoid confusion.

<div style="border:1px solid black;padding:100px;margin:50px;position:absolute;">

[dsonesuk]

The example IS correct! The div has margin 50px pushing div away from top, left edge of browser window. The divs padding pushes the paragraph 100px away from outer div edges, 100+50+1 151+.

 

Parent could relate to direct parent or outer parent, the body.

 

Positioning should never be used unless the use of floating, padding or margin cannot produce the same effect, it is a common mistake that position should be used, but because position: absolute; causes the element is taken out of flow of rest of elements, it is more likely to be more problematic than a solution.

Edited June 21, 2016 by dsonesuk