ir.net Posted June 21, 2016 Share Posted June 21, 2016 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;"> Link to comment Share on other sites More sharing options...
dsonesuk Posted June 21, 2016 Share Posted June 21, 2016 (edited) 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 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now