A couple of years ago I wrote an article for a company called Thinkful on CSS positioning, which also included a screencast that I hosted on my ImpressiveWebs YouTube channel. The video was “unlisted” but I’ve now made it public, and since some time has passed I thought I would post the video here.
It’s pretty basic stuff for most experienced CSS developers, but if anyone wants a quick primer on CSS positioning, this should be a good guide. The video is embedded below and I’ve summarized the content here in this post.
Some main points from the screencast:
- The
positionproperty in CSS takes 4 common values supported in all browsers. There are other values, but this video only deals with the well supported ones. - In order to position something with the
top,right,bottom, andleftvalues, you need to set the element to either “position: absolute” or “position: relative”. - If a child is absolutely positioned, it will be positioned relative to the viewport or the closest relatively positioned parent.
- You can make an element automatically expand to fit its relative parent by using “0” values for all the offsets.
- Static elements will ignore an absolutely positioned element, behaving as if it’s not there. Because of this, absolute positioning is not recommended for large layout features or other areas of your site that are dependent on the natural flow of elements.
- CodePen demo used in the screencast.
Thanks for posting this. I’ve determined that there is always something new to learn about CSS Positioning!
I didn’t know about the trick of making an element automatically expand to fit its relative parent by using “0” values for all the offsets. That is a nice hack.
Yeah, it’s amazing how many people don’t know that one! I didn’t know it until maybe 2 or 3 years ago, or maybe less than that.
Wouldn’t
width: 100%andheight: 100%do the same thing as the zero-offsets method?Thanks for sharing this post. It helped me a lot in designing and positioning my work wrt css.
Good guide for beginners.
This is the best article I’ve seen about positioning. Thank you!
Thanks for this wonderful video. It was interesting as well as helped me to learn some new things. So thanks
Thank you so much for sharing this video Louis, i am developing a website and i think it will help me.
As a beginner it helped me alot.Tank you very much
Great Video. I really enjoyed it. Thanks
This will work perfect with HTML5. Thank you for publishing this tutorial.
Yes It is as well work in HTML5 but you can use these with HTML 4.0 as well.
Great guide and video :)
Excellent go-to guide. Cheers.
good sharing. i had not any good knowledge about it before it i just create blog with WordPress.
I think it’s so helpfuly to me. Thank you so much for this video. Hope you’ll share more videos.
Great video, much better to have a more visual walkthrough explanation of this technique
The most nagging aspect of CSS is the position that. Thanks for a lot for sharing this great tutorial.
Very clear tutorial video, thanks. Much better to watch a video rather than reading a bulk of text.