I’d been looking for a source to explain the basics of CSS Positioning. I am new to web design and really appreciated this well-worded article with great examples. Thanks!
Copy & paste the code below to embed this comment.
escoles
The article doesn’t really establish how contexts work for relative positioning. Example D nests the “blue” box* inside the red one, and that appears to be how you make the blue box display to the right of the red box and at the same level.
What you don’t establish is how to make two boxes appear on the same horizontal level—have the same “top” offset—without one being nested inside the other.
If that’s not possible, it would be a good thing to tell us so, so we don’t waste hours trying to figure out how to make this fairly obvious-seeming thing work. If it is possible, you would do well to construct your example to illustrate as much—since it’s clearly a preferable use-case to nesting a box inside another box to give the illusion of them having the same “top” offset.
—
*It would be helpful if you used more obvious hex triplets to create your “red”, “blue”, and “green” examples—using the ones you do is basically a way of saying to users “you’re not advanced enough to play in our club, come back when you learn to read hex.”
For example H2, “This allows the #box_2 element to maintain its top edge and still shift 100 pixels to the left.” should be “This allows the #box_2 element to maintain its top edge and still shift 100 pixels to the right.”
66 Reader Comments
Back to the ArticleGlobuleDesign
Great article, well written and very informative.
Thanks loads
swolleat
I’d been looking for a source to explain the basics of CSS Positioning. I am new to web design and really appreciated this well-worded article with great examples. Thanks!
escoles
The article doesn’t really establish how contexts work for relative positioning. Example D nests the “blue” box* inside the red one, and that appears to be how you make the blue box display to the right of the red box and at the same level.
What you don’t establish is how to make two boxes appear on the same horizontal level—have the same “top” offset—without one being nested inside the other.
If that’s not possible, it would be a good thing to tell us so, so we don’t waste hours trying to figure out how to make this fairly obvious-seeming thing work. If it is possible, you would do well to construct your example to illustrate as much—since it’s clearly a preferable use-case to nesting a box inside another box to give the illusion of them having the same “top” offset.
—
*It would be helpful if you used more obvious hex triplets to create your “red”, “blue”, and “green” examples—using the ones you do is basically a way of saying to users “you’re not advanced enough to play in our club, come back when you learn to read hex.”
escoles
… the relative positioning use-case in this article is completely unrealistic.
carsonw
For example H2, “This allows the #box_2 element to maintain its top edge and still shift 100 pixels to the left.” should be “This allows the #box_2 element to maintain its top edge and still shift 100 pixels to the right.”
npuffer
Thank you so much for writing this article. It has definitely taken the “mystery” and guess work out of positioning.