“we apply different position values to a given selector until we get one that works” – well, actually we do this because there are browsers out there that don’t respect standards. Ten years ago we’ve learned that all CSS is try and error – and we still need to come over it.
As long as browsers don’t implement CSS like it’s written in the specs, theres less reason to study the specs, exactly?
Just a “thank you” from this self-taught artist-designer. I’ve learned this material a number of times when things didn’t fall together as I expected on the page. I think that now, thanks to your articulate explanation, I’ve finally got a handle on it for good. It’s not rocket science, but until you understand the underlying logic, it makes no intuitive sense. Now I think I do. Thanks for taking the time to lay it out clearly. Numerous books have essentially the same information, but have somehow still left me a little lost. Shows how important good writing is. It’s a lot more than efficient “content delivery.”
indeed with css we will save more energy when the page loads, I like this trick and if it had been added image maybe we can add background: # color url(image link) to add texture, and there will be more fantastic
Thanks for the clear instructions. I am fairly new to css and this explained a concept that has had me tearing my hair out. Straight away I was able to use what I learned to solve a problem on my site, in 5 minutes, that had, had me going around in circles for about 2 hours. Thanks.
@ UKdynamo - Thanks for the feedback! Indeed the code could have been optimized, but for the sake of explanation and simplicity in learning it is presented as is.
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 Articlekanzlei
“we apply different position values to a given selector until we get one that works” – well, actually we do this because there are browsers out there that don’t respect standards. Ten years ago we’ve learned that all CSS is try and error – and we still need to come over it.
As long as browsers don’t implement CSS like it’s written in the specs, theres less reason to study the specs, exactly?
Thierry Koblentz
Another article on this subject: the “position property”:http://www.yuiblog.com/blog/2010/12/14/the-css-position-property/ on YUIBlog.
@DrLangbhani, I’ve plugged your analogy in there :)
Eric Waldemar
Just a “thank you” from this self-taught artist-designer. I’ve learned this material a number of times when things didn’t fall together as I expected on the page. I think that now, thanks to your articulate explanation, I’ve finally got a handle on it for good. It’s not rocket science, but until you understand the underlying logic, it makes no intuitive sense. Now I think I do. Thanks for taking the time to lay it out clearly. Numerous books have essentially the same information, but have somehow still left me a little lost. Shows how important good writing is. It’s a lot more than efficient “content delivery.”
Noah Stokes
@Eric – thanks for the kind words, I’m so glad things have clicked for you! Carry on.
be4rt
indeed with css we will save more energy when the page loads, I like this trick and if it had been added image maybe we can add background: # color url(image link) to add texture, and there will be more fantastic
UKdynamo
This is very well written article, good to have basics revised again. But this code could have been more optimised. That is what I think..
Joe Cool
Thanks for the clear instructions. I am fairly new to css and this explained a concept that has had me tearing my hair out. Straight away I was able to use what I learned to solve a problem on my site, in 5 minutes, that had, had me going around in circles for about 2 hours. Thanks.
Noah Stokes
@ UKdynamo - Thanks for the feedback! Indeed the code could have been optimized, but for the sake of explanation and simplicity in learning it is presented as is.
JefferyNotZeldman
Thanks so much for the clearly written and illustrated article. This is exactly what I’ve been searching for in a positioning tutorial.
Saç kaynak
another gold from Noah Stokes =) thank you so much for all ideas & informations…
GlobuleDesign
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.