This is a quick beginner-level overview of the different CSS position values. In a nutshell: relative allows you to “nudge” and leaves the element’s original position in the page flow. Absolute and fixed allow for exact placement of elements and remove them from the page flow. Fixed positioned elements are unaffected by scrolling. All of them set a new positioning context and allow z-index to work.
Links from Video:
Sorry I didn’t close that span folks! Fortunately HTML5 is cool with that.
don’t worry about that…you’ll get better when you will create your first web site :-P…anyway thanks for tutorial
the awkward moment when he made this site
the awkward moment when you didn’t get the joke and trying to be smart ;)
Great video! Very well explained, it cleared a lot for me. I was struggling with grasping the whole idea of positioning a div in CSS.
Now I need to get a firmer understanding when to use id and class. I see you used class instead of id in your example of positioning divs next to and top of each other. I’m not sure why? Will id work just as well as using class?
I’m a bit confused as to when I use both or one instead of the other. Any suggestions? I could show you an example of what I am using to learn CSS.
**
Thanks again for such a good video!
Cheers!**
Thanks for this amazing video Chris! You are the best !
Thanks Chris for the refresher!
always great to brush up on the basics, thanks Chris!
I think I heard you mention recently that you’ve been using SASS for your recent projects, any chance of doing a screencast for that? I just started using it and it is amazing!
He’s made one already.
Thanks, Chris! I needed that.
Great Video. Good refresher + new stuff to learn. Didn’t know there is a box-sizing or that you can stretch boxes with all 4 directions in positioning fixed…
great job
Aye I’d love to see a SASS video, not the most user friendly.
Great video, I wasn’t sure which were exactly the differences between the four types of position,
Really help me to understand,
q? off-topic what’s the name of the introduction of your screencasts? how can i search this ones, any good tutorial about how to make one or who made it?
thks.
Did anyone else notice the color? #BADA55 … nice touch Chris, and great video. I never really understood positioning: I feel that even though CSS isn’t all too complex, it’s really difficult to master.
Great video – I tried to download and keep a copy but the download doesn’t work
Excellent video, Chris – thanks for the refresher!
Miles
Pretty #BADA55 screencast bro. Enjoy you on the ShopTalk Podcast as well. Thanks for all the great info.
Great Tutorial! Thanks Chris!
Hahahahah “#BADASS” ( i.e,) IE
Hahaha, I had a good laugh at that too. Just love it.
This probably comes from me reminding Chris that he didn’t put “Position” in the Almanac…
Gotta say that #BADA55 was a nice touch. Maybe you could have integrated #C55 as well?
What do you use to record the screen? I’ve tried multiple programs and they’re all reallllly bad and distorted etc :/
ScreenFlow
Heey Chris,
Thanks for this great screencast! Learned a lot of it, and i really didn’t know anything about positioning!
—
mrdejong
Very nice Chris, thanks for positioning video!
Hi Chris I have a problem downloading your video (osx firefox)
Thank you very much Chris
Chris thanks for the info man. I’ve struggled with that for awhile, even reading the positioning property on W3C didn’t seem to help… but this video puts it into perspective. It’s gonna be easier to make overlays now I can tell ya that :)
BTW thanks for the link to dabble.
Loving the video. I’ve been doing design for a while now with only a basic grasp on positioning. This was exactly what I needed to fully understand how it all comes together. Any chance you could do a similar video about the display property?
Hi! nice video!
Could you create an article explaining how to make two divs fill up available space inside a wrapper?
thanks!
That is simple and great.
Many, many Thanks Chris!!!!
thanks chrise
Bit off “positioning topic”, but I never realised the point of box-sizing before, thanks. I’ve been using extra mark-up to handle this normally.
I also liked the overlay diversion.
#FAB – jeez, it’s really hard to make up #BADA55 hex names!
Ah ha, just found this:
thanks i finally get this after being a web developer for 2 years
Awesome video, have read about ten articles on CSS positions and didnt understand it fully – after watching this video, I know do!
Thanks Chris, keep up the good work!
Chris, did you notice that if we set some element absolute positioned inside an element relative positioned but also with
display:table, then the “relative” position will be lost. Do you know why this happen? It’s a kind of bug?it’s always nice to see a small tutorial on some of the basics of css. It’s absolutely crucial to fully understand how to use the position property of an element if you want to be able to easily manipulate any element on the page. By adding jquery into the equation you can achieve lots of cool things.
Chris, once again another great screencast.
I thought I knew all about CSS positioning, but there were things I still didn’t know.
I had been so pissed off by the 100% + padding = scroll bars.
I think my life has been changed by box-sizing.
Going to go write a novel now….
Thanks so much for this Chris.
This will be one of the resources presented to new people at our company. People relatively new to html still struggle with them (the more experienced get freaked out aswel from time to time ;-) )
Tomorrow at the office i will check if your website already made it to our resources list. Surely one to add! Thanx.
that was too quick!
Good refresher.
and, “hey guys” big improvement over hello world ;-}
Chris, I’ve seen a million screencasts about positioning (and other CSS principles) but yours always seem really well thought out, structured and easy to understand. I thank you for the effort you put into these things.
Awesome! I love your tutorials.
Hi Guys,
I am new to css and html and boy am I glad I found your website. The tutorials are so easy to understand .. I was really getting tired ready forums and finding answers, cause video is always a better medium to see whats going on .. so great job.
Regards,
– Tirmizi
Nice tutorial. Love your work, keep on…
Awesome! tutorial.
Thanks for sharing.
Thanks a lot!
Thanks Chris, Found this site through Lifehacker. Your tutorial is exactly what I was looking for. Awesome!
Positioning elements is sometimes confusing. Your video helped me a lot. Thanks.
thanks for sharing….thanks a lot…
Excellent ! Teaching Chris, you are great!
Thank you.
never thought it would be that easy.
Hi Chris !
I love your tuts. Its so down to earth easy to understand !!!
Merry Chrismas :)
Great tutorial Chris. I like how you make it interesting. Thanks!
Awesome tutorial… Thanks to share…
Again…Great information!!!
I usually only stick around just reading your posts. I must take some time to see your videos!! This one is great!!
Thanks!!
Bests Regards!!
Wow, that was an amazingly informative 13 minutes, thanks!
Fantastic video!!! In 13 minutes this taught what 2.5 hours in a classroom couldn’t clarify!
hahahahaha yeah right.
Explained Excellently… Great video.. Thanks
Excellent! This helped me quickly sort out a complex WordPress header customization problem that I’d been banging my head against. Clarifying the position property and nailing it down made it easy to sort out its partner-in-crime: the display property.
This was all for the sake of responsiveness, of course, because iPhones have such a darned small area.
I’m so glad I’ve started viewing more of your videos. I’m a student and you explain things in a way that is very easy to understand. I like how you add additional knowledge into this video about things like overlays. Great job!
I still haven’t find any practical use of the
position: static;I wonder what purpose could it serve anyway?It’s the default, so if some other selector is setting one of the other values, you can override it back to the default with this. I don’t use it super often, but it does come up.
What browser did you use when you introduced opacity? Only Chrome and Safari don’t exhibit the behaviour of making text below div appear underneath on a Mac. I see you mentioned Screenflow – so I’m assuming a Mac too..
Using OS X Sierra
Chrome Version 58.0.3029.110 (64-bit)
Or
Safari 10.1.1 (12603.2.4)
I’m interest to know able how http://dabblet.com/ can be tweaked to use
DOCTYPE html:
Any what version do you recommend? xhtml11.dtd ??