CSS Positioning Basics (Screencast)

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 position property 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, and left values, 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.

19 Responses

  1. Marc:

    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.

  2. Thanks for sharing this post. It helped me a lot in designing and positioning my work wrt css.

  3. Hmmm, that’s odd. What happened when you tried to post there?

    Anyhow, the easiest way to do this is to duplicate the entire JS file and change “#dropdown” to “#dropdown2”, and change the HTML for the 2nd dropdown to match. You’d also have to change a few other things, like menuLinks = $("nav ul li.menu>a") would become menuLinks = $("#dropdown2 nav ul li.menu>a") to ensure you’re targeting only the 2nd menu with the 2nd code block.

    But I warn you: This is an awful way to write JavaScript! You shouldn’t have to duplicate the whole thing like that. My code isn’t great, so upon review today, I can see it’s not going to be easy to make this apply to any dropdown. I simply didn’t write it that way. I should have written it as a jQuery plugin to apply to any such menu.

    But on a related note, I can’t even imagine why you would want more than one such menu on a page! That seems like overkill but I guess there are edge use cases for everything! :)

  4. Good guide for beginners.

  5. Jane:

    This is the best article I’ve seen about positioning. Thank you!

  6. Thanks for this wonderful video. It was interesting as well as helped me to learn some new things. So thanks

  7. Eril:

    Thank you so much for sharing this video Louis, i am developing a website and i think it will help me.

  8. As a beginner it helped me alot.Tank you very much

  9. Great Video. I really enjoyed it. Thanks

  10. This will work perfect with HTML5. Thank you for publishing this tutorial.

  11. Tom:

    Great guide and video :)

  12. Excellent go-to guide. Cheers.

  13. good sharing. i had not any good knowledge about it before it i just create blog with WordPress.

  14. I think it’s so helpfuly to me. Thank you so much for this video. Hope you’ll share more videos.

  15. Great video, much better to have a more visual walkthrough explanation of this technique

  16. The most nagging aspect of CSS is the position that. Thanks for a lot for sharing this great tutorial.

Leave a Reply

Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field. If you use keywords, your comment will be deleted, or your name will be replaced with the alias from your email address. No foul language, please. Thank you for cooperating.

Instructions for code snippets: Wrap inline code in <code> tags; wrap blocks of code in <pre> and <code> tags. When you want your HTML to display on the page in a code snippet inside of <code> tags, make sure you use &lt; and &gt; instead of < and >, otherwise your code will be eaten by pink unicorns.