February 15, 20215 yr I'm going back to basics and doing a HTML/CSS course on Udemy and conveniently enough the tutor is avoiding the whole 'position' property thing and only touching on it when needed. I thought well lets have a closer look at this cos if I'm doing web design I need to understand this stuff. So I've looked at w3schools and freecodecamp and still can't find a good tutorial explaining how the position property works. When I try some of the examples it doesn't seem to follow how they've explained it works. 'Position' property has got to be one of the most confusing topics I've ever come across. I'm asking, no begging is there a clear, concise and thorough resource which deals with this topic properly without confusing the student and is actually correct? Or should I just go and bang my head off of the nearest wall? This is one of the examples which doesn't seem to follow the explanation given: According to freecodecamp an absolutely positioned element is relative to its parent. An element with position: absolute is removed from the normal document flow. It is positioned automatically to the starting point (top-left corner) of its parent element. If it doesn’t have any parent elements, then the initial document <html> will be its parent. The coordinates of an absolute positioned element are relative to its parent if the parent also has a non-static position. Otherwise, helper properties position the element relative to the initial <html>. See code below 'removed from the normal document flow' okay what exactly does this mean? Does this mean all parents to this element are no longer parents because that's what it's behaving like? When I run the example below the blue box falls outside the 'container' parent I gave it, Why? The blue box is also not positioned automatically to the starting point (top-left corner) of its parent element or any parent for that matter, as it was explained it should be. What am I missing here? <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="/cssreset-meyers.css"> <style> .box-orange { position: static; background: orange; width: 100px; height: 100px; } .box-blue { background: lightskyblue; height: 100px; width: 100px; position: absolute; /* top: 0px; left: 0px; */ } .container { border: black solid 1px; position: static; } </style> </head> <body> <div class="box-orange"></div> <div class="container"> <div class="box-orange"></div> <div class="box-blue"></div> </div> </body> </html> Edited February 15, 20215 yr by GusGF
February 16, 20215 yr https://css-tricks.com/video-screencasts/110-quick-overview-of-css-position-values/ ^ This might help. 18 hours ago, GusGF said: 'removed from the normal document flow' okay what exactly does this mean? Does this mean all parents to this element are no longer parents because that's what it's behaving like? When I run the example below the blue box falls outside the 'container' parent I gave it, Why? The blue box is also not positioned automatically to the starting point (top-left corner) of its parent element or any parent for that matter, as it was explained it should be. It means it can go outside of the containing element to anywhere in the document. By default, if a position absolute element is not wrapped in something that's position relative, it will be relative to the document. In your example, your container doesn't have position relative on, so it's falling back to the document to provide a default position. Here's an example that hopefully makes more sense - https://codepen.io/jackpallot/pen/bGBqZNq
February 16, 20215 yr Author Quote By default, if a position absolute element is not wrapped in something that's position relative, it will be relative to the document. Okay I missed that condition i.e. that a parent (as there can be many) must not have position static if it is to contain the absolute child element otherwise it uses the HTML element. An omission (W3Schools left this little caveat out too) to catch out the unsuspecting and throw them into absolute confusion. I also made the error of not setting/uncommenting the absolute element position helper properties i.e. top, bottom, right, left, in my example. After reading your reply and using the helper properties it's now making sense.
February 16, 20215 yr Author I looked at the video you posted the link to in your reply and I've heard of that site before and it does look good so it's stuck in my bookmarks. One thing I noted from the video @5:02 Even though I had the same code as Chris I had a different outcome, not a biggy. Image on the right is mine, using p tags sorted it out.
Create an account or sign in to comment