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:
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
leftvalues, 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.