Position - Static, Relative, Absolute, Fixed | CSS | Tutorial 6

Source Code - www.giraffeacademy.com/web-dev... This video is one in a series of videos where we'll be looking at styling websites with CSS. The course is designed for new web developers, and will introduce common web development and styling concepts using the CSS language.
Throughout the course we'll be looking at various topics including colors, margins, padding, positioning, selectors and much more.

Пікірлер: 109

  • @junaidt7553
    @junaidt75534 жыл бұрын

    The best teacher I have ever seen in my life for Web Development. i have learned full HTML as an 11 years Kid By his teaching and now time for CSS then Javascript. Thanks Mike a lot !

  • @pabloromero8974

    @pabloromero8974

    3 жыл бұрын

    He kid, I wish you the best of luck, Im 17 and Im also learning for myself, I wish I could have learned this before, I hope you keep doing this!!!

  • @honeyzune7835

    @honeyzune7835

    3 жыл бұрын

    I think I am old now. I am 22 and start learning. Kinda feel I am out of date.

  • @bfghsdffffd

    @bfghsdffffd

    3 жыл бұрын

    @@honeyzune7835 21 here, feeling the same way, but let's enjoy it anyway

  • @honeyzune7835

    @honeyzune7835

    3 жыл бұрын

    @@bfghsdffffd Thanks, Kaedrick. I am so glad that I found you. Yes! Let's study. We can do this.

  • @leto1449

    @leto1449

    3 жыл бұрын

    ​@@honeyzune7835 I don't think learning has a specific age

  • @cristoballabotsirc1355
    @cristoballabotsirc13556 жыл бұрын

    I was struggling to understand the difference between relative and absolute. This video helped. I'll put these timestamps here so that I can reference them again: 1:51 - Relative 5:47 - Absolute

  • @armaanmhate2911

    @armaanmhate2911

    4 жыл бұрын

    thenks

  • @jaxxonvivaan5249

    @jaxxonvivaan5249

    3 жыл бұрын

    I guess it's pretty randomly asking but does anyone know a good site to stream new tv shows online ?

  • @fernandojoseph352

    @fernandojoseph352

    3 жыл бұрын

    @Jaxxon Vivaan i would suggest Flixzone. Just google for it :)

  • @haroldcharlie2103

    @haroldcharlie2103

    3 жыл бұрын

    @Fernando Joseph definitely, I've been watching on flixzone for months myself :D

  • @cristianotroy3675

    @cristianotroy3675

    3 жыл бұрын

    @Fernando Joseph thanks, I went there and it seems to work =) I really appreciate it !

  • @rudrashiva
    @rudrashiva4 жыл бұрын

    If Mike ever make a programming language... it will be very popular... he will make it as easy as possible and at the same time as fast as C.

  • @Will-bo4hq
    @Will-bo4hq2 жыл бұрын

    Yes! I spent 2-3 years taking college-level courses in HTML ,CSS and JavaScript and still could not grasp the concept of positioning elements. Finally, and after over 5 years of coding, I understand . You have clarified this in an 11 minute video. Thank you sir!

  • @chuckgreene11124
    @chuckgreene111245 жыл бұрын

    Been looking for a good explanation for the css position, not even my own teacher could explain it clearly. Thanks so much Mike!!

  • @sememo2471
    @sememo24713 жыл бұрын

    I don't know English very well but I learn from this video more than what I learn in videos speaking my language . Thank you!

  • @MalkiaMmoja
    @MalkiaMmoja2 жыл бұрын

    This has been one of the most complicated CSS topics for me in the past, and now I finally get the point. Thanks a lot, Mike!

  • @limitless1692
    @limitless16925 жыл бұрын

    Now i know how those ads are fallowing me along the web site Cool trick :)

  • @porker5749
    @porker57495 жыл бұрын

    Thanks for the great explanation. Never really understood positioning until now!

  • @user-ei3eg3rv6x
    @user-ei3eg3rv6x3 жыл бұрын

    Watching your tutorial is such a great experience.

  • @jussymashunye
    @jussymashunye3 жыл бұрын

    I have been trying to grasp these concepts without success, just like you did it on database design,you just cleared all the confusion and took me to work,Thank you again

  • @elenahlihor4518
    @elenahlihor45182 жыл бұрын

    You make me feel learning programming is so easy, thank you, Mike! You keep me motivated!

  • @phyothiha5419
    @phyothiha54193 жыл бұрын

    you are the best teacher for me

  • @daemxns1227
    @daemxns12273 жыл бұрын

    Eres el mejor maldito profesor que hay en la internet, thanks for existing 🥺

  • @billygruff6541
    @billygruff65415 жыл бұрын

    finally a clear explanation.. thanks mate

  • @mueezahmad100
    @mueezahmad100 Жыл бұрын

    Your tutorials are one of the best and they are really easy to understand and apply. Thanks a lot for making them.

  • @Overseer190
    @Overseer1903 жыл бұрын

    Mike Dane and w3schools are the power duo. Three hours in and I'm done with HTML and halfway through CSS!

  • @Moodboard39

    @Moodboard39

    Жыл бұрын

    👍👍

  • @attilaguba856
    @attilaguba856 Жыл бұрын

    This is the best explanation so far! finally I could understand all of them! :) thanks Mate!

  • @opencoffeevughtenomstreken2018
    @opencoffeevughtenomstreken20182 жыл бұрын

    You are a brilliant teacher Mike !!!

  • @sevedozo7335
    @sevedozo7335 Жыл бұрын

    I love you Mike 😚.no one can teach better than you . in a structured way n the words so precise n hits to the core.

  • @tekesobel9499
    @tekesobel94992 жыл бұрын

    Great Mike with you programming is easy

  • @JD-rz1ns
    @JD-rz1ns Жыл бұрын

    Clear, concise, and understandable, thanks very much.

  • @Shubham-jr8nc
    @Shubham-jr8nc5 жыл бұрын

    Best video ever.

  • @ceiven
    @ceiven Жыл бұрын

    You keep inspiring me Mike, thanks a lot

  • @JaisinhNimbalkar
    @JaisinhNimbalkar5 жыл бұрын

    Great teaching....!👌👌👌

  • @shinobiinu6920
    @shinobiinu69204 жыл бұрын

    Hey Mike, can you help me make a nav bar at the side that is fixed and the only thing that can be scrolled is the content?

  • @leojones6568
    @leojones65683 жыл бұрын

    Bro i gotta say that i'm interested in learning programming and at first i was afraid that it'll be freaking hard to learn it because i understand things really but really slow, and it takes to me much time to really understand something, so programming or even web developing? something that is quite hard to understand? I was so much afraid but your videos are giving me so much confident to learn 'cause i understand everything that you're teaching and you teach so understandably and i don't need to go 5 seconds back in the video all the time, i just understand perfectly everyrthing you say and teach so, thank you bro you are amazing!

  • @stefanjeremic4535
    @stefanjeremic45355 жыл бұрын

    Good explanation, thank you so much !!!

  • @miguelhyto54
    @miguelhyto543 жыл бұрын

    relative: 1:53, absolute: 5:52, static: 7:12, fixed: 8:47

  • @waititsnilson1298

    @waititsnilson1298

    3 жыл бұрын

    🤴

  • @sonamuhialdeen7866
    @sonamuhialdeen78663 жыл бұрын

    Amazing tutorial

  • @rudrashiva
    @rudrashiva4 жыл бұрын

    He should be the brand ambassador of coding. Infect someone should name a programming language in his name.

  • @Eckister
    @Eckister3 жыл бұрын

    very cool stuff, thank you Mike!

  • @joshuamawutorklint6046
    @joshuamawutorklint60462 жыл бұрын

    Fantastic tutorial thanks

  • @melk48111
    @melk481114 жыл бұрын

    Great explanation. Thx

  • @ayeshach9076
    @ayeshach90764 жыл бұрын

    thnx for such amazinf tutorials i really like your style...plzz upload a series like this on mobile app development using android studio...it one of my subjects this ssemester and i cant understand it

  • @souley3292
    @souley32922 жыл бұрын

    Amazing!!

  • @munchycrunch3195
    @munchycrunch31953 жыл бұрын

    you are a great teacher :)

  • @gungunchoudhary1608
    @gungunchoudhary16083 жыл бұрын

    Thanks for the video. It's helpful

  • @toderox
    @toderox2 жыл бұрын

    good job!

  • @abirrahman2756
    @abirrahman27563 жыл бұрын

    If i dont write the width and height inside the div style tag the boxes dont appear ....can some one explain why this happens and how does that div thing works? TIA

  • @j1my258
    @j1my2583 жыл бұрын

    Drinking game: shot everytime teacher mike says “where it is supposed to be”. Thanks for the great explanation!!!

  • @Ctenid
    @Ctenid2 жыл бұрын

    Thanks Mike

  • @user-ft8kn2um7q
    @user-ft8kn2um7q2 жыл бұрын

    what's the difference between changing the position of the square relative to the container (if it is inside a div or a span) and relative to the document?

  • @ramizanlkal2531
    @ramizanlkal25312 жыл бұрын

    thank you mike ,

  • @developerashed610
    @developerashed6102 жыл бұрын

    absolut beginner help full this content

  • @kayanjaismail3731
    @kayanjaismail37314 жыл бұрын

    Good work don Mr.Mike Dane bu i have a question i would like to move my table to the corner of my page or any where on the page what tag can i use Thanks

  • @ondrejmarek9752

    @ondrejmarek9752

    4 жыл бұрын

    Check out this: kzread.info/dash/bejne/dK6Yk7KnqNTLmcY.html

  • @caniget600subscriberswitho5
    @caniget600subscriberswitho53 жыл бұрын

    In relative position the original space isn't taken up by the other one but in absolute the other div takes the space of the first one.

  • @jasonmoulder7690
    @jasonmoulder76905 жыл бұрын

    im just getting a red box on top the blue box am i missing something i cant see the end of either line

  • @jasonmoulder7690

    @jasonmoulder7690

    5 жыл бұрын

    ok nevermind i figured it out i guess it pays to read instructions

  • @szymonozimek
    @szymonozimek Жыл бұрын

    perfect, thank you!!!!!!!!!!!!!!!!!!!!!

  • @SavageSteven883
    @SavageSteven8832 жыл бұрын

    I dont understand why the red moves with the blue if the position code is in the blue's line??

  • @yogeshsaini9384
    @yogeshsaini93844 жыл бұрын

    Thanks

  • @Julies_channel
    @Julies_channel4 жыл бұрын

    This is about CSS, why do you put it in the html-file? What do I put in the css-file? I want to have it separated.

  • @user-ob8gc2kk9s
    @user-ob8gc2kk9s5 жыл бұрын

    thanks man

  • @mr.oddjellyfish8364
    @mr.oddjellyfish83643 жыл бұрын

    Dang! Thank you so much

  • @musicmasala2391
    @musicmasala23913 жыл бұрын

    Why did the red div follows blue div in absolute positioning in 0 px example

  • @antonv13

    @antonv13

    3 жыл бұрын

    Was wondering the same..

  • @lilmattster7613
    @lilmattster76133 жыл бұрын

    how do you make those boxes because I want to practice what he is saying? thank you mike btw, your vids are so helpful!

  • @Idunge28

    @Idunge28

    3 жыл бұрын

    @Lilmattster and then style it by changing the color of its background and finally setting the border style to none or maybe the border color to the same color as the background color.

  • @lilmattster7613

    @lilmattster7613

    3 жыл бұрын

    @@Idunge28 oh tysm!

  • @fancycod7393

    @fancycod7393

    Жыл бұрын

    @@lilmattster7613 and then you need to set the height and width , use this as example

  • @araWINd-niqqa
    @araWINd-niqqa Жыл бұрын

    :) very cool ggs

  • @tempeti8295
    @tempeti82953 жыл бұрын

    Whenever I put the "top:20px;" for the relative positioning, the 2 colors are static, they don't overlap. Not sure why.. I have the same html file as you. Edit: Nevermind this! I just forgot to write my closing tags :D Works perfectly! Thanks Mike.

  • @girishanker3796
    @girishanker37962 жыл бұрын

    Clean 🤍

  • @shahariarsarkar3433
    @shahariarsarkar34334 жыл бұрын

    Hey Mike, Please make a long CSS video by combining all the Videos.

  • @NehaRampuria
    @NehaRampuria4 жыл бұрын

    I did not understand the difference between fixed and absolute?

  • @couupakb9669
    @couupakb9669 Жыл бұрын

    My colors just disappear when i type in "top:20px"???

  • @emmanuelkunbit
    @emmanuelkunbit Жыл бұрын

    Please sir can you help me to creat website content??

  • @caniget600subscriberswitho5
    @caniget600subscriberswitho53 жыл бұрын

    Display position float and clear If you can understand and imply these properties then you can master CSS

  • @samugindert3042
    @samugindert30425 жыл бұрын

    My page won't scroll down, so it cuts half of the paragraph. Any ideas?

  • @limitless1692

    @limitless1692

    5 жыл бұрын

    Add more break lines tags ...... It will fix your problem ... add as manny as you wish :) good luck

  • @oxygenfh4499
    @oxygenfh44993 жыл бұрын

    If i were a king , I should donate you💟

  • @Moodboard39

    @Moodboard39

    Жыл бұрын

    Wtf

  • @Shubham-jr8nc
    @Shubham-jr8nc5 жыл бұрын

    Can you upload a full course for JavaScript

  • @agarespreta8983

    @agarespreta8983

    5 жыл бұрын

    watch?v=_jlPywA4dKs

  • @alexmercer8527

    @alexmercer8527

    5 жыл бұрын

    he has in his website go and check it www.mikedane.com/

  • @ilijaknezevic8370
    @ilijaknezevic83704 жыл бұрын

    I type the same lines of code, the squares are totally over one another. What am I doing wrong?

  • @mountainp800

    @mountainp800

    4 жыл бұрын

    end the div element

  • @geetapathania4115
    @geetapathania41154 жыл бұрын

    HI. very nice tutorial. I am starting learning and having much interest . Best teacher.But could you please do this positioning thing with text and show. With this boxes is not easy to understand. Thank You all the best

  • @daemxns1227
    @daemxns12273 жыл бұрын

    ¿Por qué todos los canales latinos no explican de esta manera? Sentí satisfacción por dos cosas: 1. Entendí la propiedad position a la perfección 2. Llevo solo 4 semanas aprendiendo inglés y entendí el vídeo completo jeje

  • @expertmars1032
    @expertmars10323 жыл бұрын

    who disliked

  • @xyrycYT
    @xyrycYT3 жыл бұрын

    don't write like this: write like this : stupid me wasted 10 minutes for this.

  • @ilahintalibov3802

    @ilahintalibov3802

    Жыл бұрын

    Thx bro,I have also stucked here.

  • @Dev_Anand_C
    @Dev_Anand_C3 жыл бұрын

    Thanks