HomeОбразованиеRelated VideosMore From: DevTips

CSS POSITIONING (PART1)

1743 ratings | 169263 views
CSS POSITIONING YO KIDS! today we talk about the first half of the subject of CSS positioning: position: static; and position: relative; Lets talk bout it! PSSSSSHHHHFFTTTT!!
Html code for embedding videos on your blog
Text Comments (211)
Alexander Artsvuni (1 month ago)
dude ... just talk about the subject pleeeeese if we cut out your chit chat the video would make only 3 minutes directly on the subject....
Snehasish Ghosh (1 month ago)
A little weak 😬 on this one , ur other videos are good
Jonathan (2 months ago)
The flow of the dom will respect it as if it had not moved. That's a great way to relate that concept.
Sam R (4 months ago)
2:00 start
Murtaza Ali (4 months ago)
how does the relative position act when the size of the browser is changed?
Abdelrahman Magdy (6 months ago)
thanks
Paul A (7 months ago)
People usually just want a first this, than that, than this. Just go straight to the point.
Ralph Olaguer (7 months ago)
WTF i dont understand what your doing old man
kevin (7 months ago)
we dont want to see your bald ass
KARTHICKRAJA M (8 months ago)
Post video for display: property; overflow: property;
Michael W (8 months ago)
cutting between code and your face all the time is mad distracting for people new to coding, just saying.
Code Pro (8 months ago)
https://youtu.be/qag_Rq1G204
Asif khantanoli (8 months ago)
Hi sir I'm big fans of you i watch your all tutorial Sir i request you , please use css cooding not use (sass) ;-)
HelloYouThisIsMe (8 months ago)
"ah yeah, oops I lost my train of thought..." REHEARSE.....
usman ali (8 months ago)
Talkative person 😑 focus on work
mili hilina (8 months ago)
how abt the 2 other positions
Awet Teame (9 months ago)
Dude you helped within 30 seconds and solved my problem. I'm watching all of your other videos!!! Thank you!
Bill Windsor (9 months ago)
Great video -- I like your including the meta information for CS theory. One Q: at 8:18, how do you automate the keystrokes to move an object around on the page, that automatically changes your CSS code? (Here, moving around your "venanatis" word.) That seems very useful and efficient - thank you in advance
Vladimir Lemos (10 months ago)
pode fazer videos grandes meu, suas aulas são show. Obrigado por compartilhar ae, abs
Aimal Khan Musakhel (10 months ago)
wheRe is stiCkY Positioning?
Filip Blaho (10 months ago)
omg. i m 4.30 into the video and you havent really said anything dude
Joe Campanaro (10 months ago)
Dude get to the point holy shit u keep beating around the bush talking about past videos that we do not care about
Abraham Avendaño Veliz (11 months ago)
dont wanna see you face, plis make videos only scream :)
PSHARMA (1 year ago)
good
Splix (1 year ago)
ALL in short: Static: means everything (top, bottom, left, right) would be calculated automatically and the position would be chosen by the browser, for example a paragraph would be top-left by default, and that is what we call static positioning, means let the browser set its default place in the page. relative: the position gets affected by the Top, Bottom, Left, Right values, so it DEPENDS of these values in its position.
manrick divina (1 year ago)
clearly delivered bro! good job.. :)
bengtig77 (1 year ago)
This guy is more busy showing his face than the work which needs to be shown
Hristo Vatev (1 year ago)
Thank you for making such great videos! It's in uncommon to find such accurate and informative material from non-commercial sources. Much appreciated.
noel barcelona (1 year ago)
too much irrelevant talk.
Mab Ped (1 year ago)
Too much face please stop
runningonthestreets (1 year ago)
Thank you so much. I'm on one course on Udemy, things weren't so understanding. But they are now, after watching your video.
Alex Machin (1 year ago)
what is this non-sense devtips writing in plain vanilla css what ha
Hamad Zeb (1 year ago)
face and face in whole video
Greg Caesar (1 year ago)
had to turn off when he said "default" for the 100th time.......so much waffle.....yeah we get it, static is the DEFAULT position , so why not explain what exactly that means.....not that its just default.
Calvin P (1 year ago)
sorry, cant bear these videos, too much talk.
陈瀚龙 (1 year ago)
Don't shorten your videos. Forget the ADHD's in the audience. Survival of the fittest. Only way to get out of this Idiocray! Challenge our brains, mate Great videos:)
Reggan Keggan (1 year ago)
One thing I can say, good teacher coz he wants his students to know clear so if U think is too much faces download audio/ find another vid but 4 me is awesome *GREAT Dev Tips keep it on* 👍 😁
Ramon Chavez (1 year ago)
Tanks Mon, I have better understandin of positionin now!
nadim hossain (1 year ago)
fonts are too small in this video,i can't see the coading,my bad,your tutorials are awesome though.
Ahsan Waseem (1 year ago)
thanku for explaining this, i get confused with absolute and relative; so this explaination helps a lot. yesterday i was making a front page of the website and I used video as a background but didnt know how to make the headings visible on top of it and that they stayed in their position, so i made video as absolute and headings etc as relative and I was able to do it, but this video was needed to be absolute sure about positioning. great job
William James Rapp (1 year ago)
Thank you for giving us your effort -- lost me but thanks anyway.
Francisco Ícaro (1 year ago)
Thank you so much, you're cute, you're smart, you're A GOOD PROFESSOR HOLY MOTHER OF GOD THANKS
First Last (3 months ago)
fag.
this boy should not teach! Man you are boring..
vkubre (1 year ago)
This series is very great to learn all the positioning stuff, I would recommend this to others also.
Hamed Pour (1 year ago)
-1 for too much face and not enough info. Go watch Derek Banas and learn how to make tut videos you scrublord!
Peter Bou Saada (1 year ago)
hey guys, i made a script that will position any element in u want in the center horizontally, feel free to use it: http://codepen.io/peterbs/pen/aJNEvB to use it: margins([put here what you would put in $('element') using jquery. see example' ]);
Tata Do Re Mi (1 year ago)
sorry dude but too much bla bla bla in the beginning :-(
معن سليماني (1 year ago)
you look like an Arab do U have a middle eastern relatives
Arthur (1 year ago)
too much face bro
Qudra k (1 year ago)
your videos are awesome
Yevgeny (1 year ago)
Why not build your own website? With WebDivs you can build your own professional website!
Joel Álvarez (1 year ago)
Two things: - I really love you videos, the best guy on youtube. - Your cute!
Indranil Jana (1 year ago)
heloow my css boss wish u nd ur family a very vary happy Merry Christmas
Indranil Jana (1 year ago)
nothing more comnent about dis video just want to say vampire attack ur neck...
ChaoticTrack (1 year ago)
explained well, but the information could have been compressed.. by a lot. :)
philboytano (1 year ago)
Dude, too much face on the video. You should focus more on the sample screen while you talk.
Alex (4 months ago)
Not just men think so )
Roger H (8 months ago)
My first thought too. Most of us are men. Ain't starin' at no man's face that close.
Matt McRae (11 months ago)
Brahhh
kobe248ryant (1 year ago)
Who doesn't like his sexy face?
philboytano You school teacher's all were in your face.. More examples will follow...
Miguel S (2 years ago)
veeery instructive =D
Emanuel Vallejos (2 years ago)
I like the idea that you did and explain a lot to me, This video is worth to share and worth discuss to the people like me (starting). Pretty cool huh.
Leverquin (2 years ago)
why people frefer sass over css?
Pranoy Dutta (2 years ago)
sass has many powerful features, such as variables and loops, that css doesn't have
joy (2 years ago)
bleeepppp
Bojan Sakovic (2 years ago)
Bad explanation on relative.
Evan Parcon (2 years ago)
Bem! Thanks a bunch travis
First Last (3 months ago)
Are you trans?
Indranil Jana (1 year ago)
Bem! Thanks a bunch evan parcon
DevTips (2 years ago)
Yes!
Iacovenco Vlad (2 years ago)
Why was the baby crying...? :(
Iacovenco Vlad (1 year ago)
There is something really wrong with you dude. First time on internet?
DJ LNR (1 year ago)
Iacovenco Vlad you have nothing better to do? why would you ask that? I am fascinated to know, this is a programming video, your way out of your YouTube watching zone but maybe I am being odd so correct me please because it seems like the future has really been already written already due to the way people just say(type) things with no thought on the Web. < did you know typing something from your ip address is more a reality than what you verbally say according to most courts around the planet..
Iacovenco Vlad (2 years ago)
Sounds legit enough ^^
Jeremiah Fernandez (2 years ago)
Because that's what babies do
AceOf Spaydes (2 years ago)
Haha you're so likeable its not even funny, swear to god i want you as my tutor for anything web dev related. Just started transitioning from back end to front end, and totally gonna watch your vids
DevTips (2 years ago)
Thanks Ace, thats really nice of you to say :)
Vikrant Kumar (2 years ago)
Great post for me, It will be great if you share some basic understanding on CSS3 animation, how it work actually. Thanks a lot
Vikrant Kumar (2 years ago)
i am eagerly waiting for that....
DevTips (2 years ago)
Great idea!
Daniel Ross (2 years ago)
Really good video dude! You explain things very well!
DevTips (2 years ago)
Thank you!
Thomas Geelens (2 years ago)
Only 2 minutes in but I already love it! The fact that you show your face makes me connect more with the material, there is a "face behind the logic", thanks!
DevTips (2 years ago)
Awesome man, thanks for watching!!
JMC (2 years ago)
Dude you don't have to show your face every 10 seconds.. we ain't going to learn better looking at your beard. Focus on code. You are doing a great job. Thanks.
shoppingfiesta (2 years ago)
There are also women watching these videos, like myself, and believe me, his face is one of the many reasons to follow this channel 👍
Kristy Lee (2 years ago)
great video! subscribed :D
Andrew Benson (2 years ago)
hi
Randy Jhones (2 years ago)
Dont show your ugly face and focus on screen?!
Eric Bruno Nz (1 year ago)
I love that Travis ... Very good answer :-) I think people should focus more on the information we get from you.
DevTips (2 years ago)
Is that a question?
DJ LNR (2 years ago)
lol
DevTips (2 years ago)
:D
rohit shetty (2 years ago)
never coming back to this channel..you are not so beautiful that people will want to see your face for so long.Self-obsessed freak.
DevTips (2 years ago)
Thanks for the references, I'll check em out!!
rohit shetty (2 years ago)
Ya it was similar to vitaly zd's vlog channel. More commentary. Less/No substance. I am not questioning your skills as a designer at all. You might be the best at what you do. Check out kudvenkat's channel on YouTube. I don't know what he looks like, but has taught me a lot, you are quite the opposite. But you will get better with time I am sure. Have a good one.
DevTips (2 years ago)
+rohit shetty Hey there. I know exactly what you mean. It's a hard balance, I want to teach in a personal way and some people really connect to it, but some don't. And that's okay! Have a good one out there in YouTube Land.
Gillian Kelly (2 years ago)
Thanks Travis..... this has been driving me crazy.... maybe I should put it on a loop as I go to sleep so I absorb those nuances... could you do a simple tutorial on creating - full screen image website with nav bar and text block - with simple footer - four/five elements..... might make it easier to understand those positioning fellas.....
DevTips (2 years ago)
There are two series that use those features. Check em out.
Daryll Mojica (2 years ago)
Lasted 4 minutes before I had to click off the video. I'm not here for your life story or your previous videos, I'm looking for css positioning.
Nick Drake (2 years ago)
+Daryll Mojica i got to 5:22
מאור בר (2 years ago)
love your movies! which editor you suggest to use in windows?
Nick Hahn (2 years ago)
atom.io The Atom-editor
BledeTestChannel (2 years ago)
Most of the time you say that we should just come by and say hello in the comments so... Hello, fan of your channel from a week ago but i've seen probably 2 or 3 series of yours! Keep it up
DevTips (2 years ago)
Thanks! Hello to you too :)
Larry Sunshine (2 years ago)
way too much chit chat. Cant bear it.
brzdude06 (1 year ago)
So you're just here for the attention? Get the fuck out, man!
phaedris (2 years ago)
Well, everyone has a different style I suppose, both viewer and presenter. If your style is simple and direct I would highly recommend Derek Banas channel. His videos are about as straight-forward and to-the-point as it gets. Cheers!
CyberGolem (2 years ago)
+DevTips :: I don't mind the 'chit-chat' since it's both informative and conducive to the learning atmosphere. The beard-cam is a little unnerving on a 30" monitor though. I keep wanting to take tweezers to that lone grey strand on your left cheek. :D
Johannes Ginthaburg (2 years ago)
+Larry Sunshine That's fair. Travis is really good at CSS though, I'd certainly value whatever he is talking about on the front end.
Larry Sunshine (2 years ago)
I find direct information more useful. This is just called 'being cute'. 'Don't like chit chat huh? Tell me about it.' - This is called 'trying to be edgy'.
sriram hegde (2 years ago)
Hey Devkit, how do you make the espresso detect scss files???
DevTips (2 years ago)
you could support the channel by becoming a patron. You can choose how much to give.
sriram hegde (2 years ago)
Devtips you are a lifesaver, I want to help you is there a way , like tweeting your brand ?
DevTips (2 years ago)
Go to language and tell it its a css file.
Practice Repeat (2 years ago)
you need to make the fonts bigger like zoom in the html /css
Dirk D (2 years ago)
I get distracted from too good image quality
Die Le Manns (2 years ago)
You are talking about that you don't want to talk to much wasting over a minute of time... :/
Abe Prangishvili (9 months ago)
:D
Tracey Gresham (1 year ago)
shutup
L K (2 years ago)
so relative is relative to where it was in the flow of the document? In other words, top would mean 50 px down from where it was in the document or 50 px down from the top edge of the container?
L K (2 years ago)
+viery365 Okay this is interesting. I would imagine all divs would be relative to the top page of the container or viewing area. so If I wanted to create a new css box under a box, how would the code look? Also, inline block for a 50x50 box would eat up the entire right side of the space to the right view port ?
Mike Endsley (2 years ago)
+Loren K great question. I wondered if the left/right values are based off of where it originally was located.
viery365 (2 years ago)
+Lorin K relative to where it was in the document
JudyYuTong (2 years ago)
I like that you use the word "respect" to explain the remaining space when it's a "relative position". Very human ha ha and really easy to understand! Thanks for the tutorial!:DD
DevTips (2 years ago)
Haha, I guess so. Funny :)
Anubhav Saha (2 years ago)
You are awesome thanks keep the good video up.
DevTips (2 years ago)
You are welcome!
Harikrishnan KayKay (2 years ago)
Thanks for the explanations..Can i know the software that is used for recording the screen and recording the sound? Is it camtasia?
DevTips (2 years ago)
I've heard of the one you mentioned. But nothing other than that. Sorry.
Harikrishnan KayKay (2 years ago)
Oh replies so fast! awesome..Any recommendations for windows? For amateurs ( free ones? )
DevTips (2 years ago)
I use screen flow on Mac
Shahnawaz Alam (2 years ago)
i like this tutorial
Oscar Estrada (2 years ago)
Great! Thank you. Is there any book you recommend? I feel like i already grasp html and css but the hard part is completely understanding the css attributes.
ashish vanjani (3 years ago)
Sir please make a video on Box Model in CSS. I have some questions reagarding the same.Why does border should not be a part of CSS box model? Please Answer Sir
saleem faeq (3 years ago)
اشكد ثقيل على المعدة يا اخي
saleem faeq (3 years ago)
+diabello93
Cat Down The Road (3 years ago)
i am so tired...of liking all the videos in you channel +DevTips , give me a <br> no mas :D
Przemyslaw Mackowski (3 years ago)
9:30... absolute is higher than relative
DevTips (3 years ago)
+Przemyslaw Mackowski yea!
Charles Brown (3 years ago)
Had a chance to read all the comments to see if my question was already answered. This is my first comment to you, so if you could.... Keep it up! The whole setup is way legit. Here's my question... I see that your using SASS, can you talk more about how to implement SASS and all that SASS jazz. Thanx U!
DevTips (3 years ago)
There are a number of videos on my channel about sass, but Scott from +Level Up Tuts has a TON of great info on the topic!
Uroš Karić (3 years ago)
Hey i really like your style of presentation u are doing awesome job. And i have a little request could you make a video about your start's in Web Dev/Design and if u had the knowledge u have now what would be the advice to your self starting all over again thx and keep it up :)
DevTips (3 years ago)
+Uroš Karić That's a great question! I'll use it for a future vlog :)
Mladen Mladenov (3 years ago)
Man you're awsome! 10x for all the staff here! It's really helpful! God Bless Ya!
DevTips (3 years ago)
+Mladen Mladenov thanks! I'm glad you like the videos :)
Pinchez Maish (3 years ago)
<p> i really loved it....:) good job buddy</p>
Kirito PHP (3 years ago)
Cool vid. It really would be great to know when and where to use those positioning like the one example you said on carts(?). Can you please do a video of those "tricks". Thank you so much~ I'm learning a lot :)
DevTips (3 years ago)
have you seen this? https://www.youtube.com/playlist?list=PLqGj3iMvMa4IyCbhul-PdeiDqmh4ooJzk
Kirito PHP (3 years ago)
haha I already watched it. I like all your vids. compared to all tutorials i watched. makes me smile when you sing and do all crazy stuffs. haha no homo though. sorry for bad english. can you make a video combining all your tuts? like developoing a site? :)
DevTips (3 years ago)
+Kirito PHP Oh O hoped this video answered those questions. Darn. Where are you confused?
Georgi Georgiev (3 years ago)
Thank you. GOD bless you.
millennia (3 years ago)
I could never get bored of your videos! You're a natural speaker! :D
DevTips (3 years ago)
+millennia Thanks for the compliment! I'm really happy that you like the videos!!
Oscar Goossens (3 years ago)
So much for the "hopefully I'll edit it down".  Nice vid anyway:)
DevTips (3 years ago)
+Oscar Goossens :)

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.