CodeinWP CodeinWP

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 says:

    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. Simon says:

    Good guide for beginners.

  4. Jane says:

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

  5. Anitha Raj says:

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

  6. Eril says:

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

  7. Brian says:

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

  8. Jeffrey Joy says:

    Great Video. I really enjoyed it. Thanks

  9. Kualitatem says:

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

  10. Tom says:

    Great guide and video :)

  11. Chris says:

    Excellent go-to guide. Cheers.

  12. Aksa Sahi says:

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

  13. hai san says:

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

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

  15. Dan Roy says:

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

  16. Storm says:

    Very clear tutorial video, thanks. Much better to watch a video rather than reading a bulk of text.

Leave a Reply

Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field and deep URLs are not allowed in the "Website" field. If you use keywords or deep URLs, your comment or URL will be removed. No foul language, please. Thank you for cooperating.

Markdown in use! Use `backticks` for inline code snippets and triple backticks at start and end for code blocks. You can also indent a code block four spaces. And no need to escape HTML, just type it correctly but make sure it's inside code delimeters (backticks or triple backticks).