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

CSS & HTML Tutorial #12: Positioning Elements with CSS - Static, Absolute, Relative and Fixed

426 ratings | 59780 views
DOWNLOAD THE SOURCE: https://www.langmanual.com/post/1548432868soHrl Follow me on Langmanual https://www.langmanual.com/user/shane In the tutorial we cover positioning of elements on the page with static, absolute, and relative and fixed positioning.
Html code for embedding videos on your blog
Text Comments (67)
I add the video and now how can I do <br /> <br /> <iframe width="560" height="350" src="https://www.youtube.com/embed/xJVSPwvF2pE"> </iframe>
Sebastian Kumlin (1 year ago)
Amazing video
Lewis Adelaide (2 years ago)
dat mic doh
Gamer Sparta (2 years ago)
What if i have another box in the little box ?
samu8882 (2 years ago)
you have a main.css linked why write the code in the html and not in that? would be way cleaner
Ralph Tyrell (2 years ago)
Thank you for a clearly presented video. Helped me a lot.
Frame Factory (2 years ago)
NICE, but sound is annoying. Change mic or set level lower in controlPanel -> sound -> recording -> mic properties thx a lot
shani shakeel (2 years ago)
Ah finally clear... :P Got it thanx :)
Aakash Mishra (2 years ago)
Didn't get the part from 8:50 to 9:04. If he positioned box1 as absolute and since it didn't have any ancestor it should have been positioned according to the document body, no?
ArtAway (2 years ago)
Great video man, that mic tho
Zoe D (2 years ago)
I still dont unmderstand absolute and relative positioning :./
Akshit Miglani (2 years ago)
I'm also currently learning HTML CSS. This thing is really not quite as simple, it took me a while to get it. I'd suggest you to watch 2-3 tutorials on this plus read these following links. Hopefully that will help. http://stackoverflow.com/questions/10426497/position-relative-vs-position-absolutehttp://www.w3schools.com/css/css_positioning.asp
Santosh Jadagoudar (2 years ago)
RE: Why would you position anything relative? When relative is used, we can base the element relative to another element. Absolute positioning if used on an element, it gets removed from the document and is placed exactly where you need. How does #abs1 know its going to be put inside the green box? Your second understanding is correct. It's because abs1 is made positioned relative to subc1. Do you need one to relative to have another placed in it? Well, this does not seem to be right. There are various ways to get this done. :) Why are both #div2a and #subc1 placed down in the grey box even though I don't see any top margin for either. Again, this happens because the top 2 divs have a height property added to them. However, there are 2 things that we must take into consideration. a. If you change the position of div2a to relative, you'll see the subc1 div further down. This happens with block elements. To overcome this we can use clear and floats. b. Absolutely positioned elements somehow get quirky as they seem to override the default behavior of block elements. In conclusion, thus they won't care about the margins. Play around with height and positions to understand this a little better. Are static elements block, and absolute items inline? Hmm, I'm not sure about this. I'll update this answer if I come across anything. Further reading: http://stackoverflow.com/questions/10426497/position-relative-vs-position-absolute http://stackoverflow.com/questions/20718577/how-css-positions-work-why-absolute-elements-stack-up-on-each-other-instead-of Hope this helps.
Zoe D (2 years ago)
http://codepen.io/DoucetteDeveloper/pen/jALAYw I've made a pen of it. Thank you, I still don't get it. Why would you position anything relative? How does #abs1 know its going to be put inside the green box? is it because abs1 is written just below it in the html document? or is it because abs1 is made position relative? (do you need one to relative to have another placed in it?) Why are both #div2a and #subc1 placed down in the grey box even though I don't see any top margin for either. Also are static elements block, and absolute items inline?
Santosh Jadagoudar (2 years ago)
Try this:) <style> /* By default elems are stically position */ #container1{ width: 500px; height: 500px; background-color: grey; margin-left: 250px;} #div1a{width: 100px; height: 100px; background-color: orange; } /* Absolute pos is to position an element relative to its nearest ancestor or the document itself. */ #div2a{position: absolute; width: 100px; height: 100px; background-color: white; margin: 0 0 0 50px; } #subc1{position: relative; width: 100px; height: 100px; background-color: green; left: 299px;} #abs1{position: absolute; width: 66px; height: 66px; background-color: white; top:9px; left: 10px;} /* Always fixed */ #fixed{position: fixed; background-color: red;width: 25px; height: 125px; top:250px; left:250px; text-orientation: upright;} </style> <div id="container1"> <div id="div1a" >Static default</div> <div id="div2a" >Absolute pos; </div> <div id="subc1">subc1<div id="abs1">ABS to subc1</div></div> <div id="fixed">M fixed</div> </div>
mick Pierre (2 years ago)
My question to you is how did you set this up? not the video but the website you were building in the video. I want to test out my coding and make sure that it will come out how I want it on the website, which is what you were doing. but how? @jupitershanestap
ArtAway (2 years ago)
You can just open the index.html to see if it's right or not, in this case, this person set up a local server
jjjdgd5 (2 years ago)
Hi. You have to create a web page named for exemple "index" with ".html" as a type. After this, you have to download for exemple "notpad++". It will be your coding editor. Edit your index.html file with this program and write down the basic skeleton: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> </head> <body> </body> </html> Then you must have your coding software running next to the index.html that you will open with your browser (firefox for exemple). When doing some coding, you have to refresh your page "F5" to see the changes. The css can be write directly in the html code with: <head> <meta charset="UTF-8"/> <style> </style> </head> or via an external file with ".css" extension name "stylesheet.css" in the same folder of your index.html: <head> <meta charset="UTF-8"/> <link rel="stylesheet" type="text/css" href="stylesheet.css"/> </head>
Naidu M.Krishnakumar (3 years ago)
awesome tutorial really helped me a lot thanks sir
Harper (3 years ago)
thanks this helped alot
Jamie Reason (3 years ago)
good video but i recommend you get a better mic
jjjdgd5 (2 years ago)
It's the indian accent, you can't correct it xD :)
Bilal Haider (3 years ago)
very easy to understand. thanks :)
Shamseer Ahammed (3 years ago)
Awesome bro! thanks
Shrujan Chowdary (3 years ago)
worst accent and worst video guys, just skip it
Iulia V. (1 year ago)
It's actually a very good accent and a very good video. Only slight problem is his mic. Haters gonna hate.
zile Meezilic (3 years ago)
Very nice ,thx for big help!
Html Css (3 years ago)
Adam Salma (3 years ago)
Great tutorial, lots of content and examples
kolinio musuka (3 years ago)
thank you for sharing this tutorial is very awesome indedeed
Nakul Tyagi (3 years ago)
not good! He himself is confused .
Jon Espinoza (3 years ago)
Thank you, it did really helped me to understand this confusing topic.
Georgi Georgiev (4 years ago)
Thank you. GOD bless you.
Anon Ymous (4 years ago)
did he seriously remove the orange box completely just to rewrite the same code again?
Jade True (4 years ago)
Exactly what I thought! :')
Practice Repeat (4 years ago)
you can type background: #color instead of background-color: #color.
james D (4 years ago)
great! thanks
Hussain AL-Qabandy (4 years ago)
thanks for the great video.. it was really helpful 
Phillip Davis (4 years ago)
Ghaith Ali (4 years ago)
thanks a lot for the illustration :)
nikhil pardhe (4 years ago)
@3.40 if u give border (1px solid) for both div ie container and box.... orange box will move from top (using margin-top) .... no need to make orange div as absolute. try it can anyone explain how this is work?? how border can make a huge difference ??
Cicily McFadden (4 years ago)
Thank you so much I was very confused for a long time with trying to remove the scroll bars off my home page and using the position:relative attribute solved my problem.
Diganta Ray (4 years ago)
this man explains very good but has a very less expirience
Tyler Curry (4 years ago)
Thank you! I took a class in web development and the professor never explained it this well.
Tanay Agarwal (5 years ago)
Relative positioning is somewhat same as the Static one. But instead of making the container as relative, we can actually set that as absolute and make the box absolute as well. What this will do is it will make the container relative to the <html> and the box relative to the container. I really did not understand the mean of setting the container's position as relative.
Ivelios (4 years ago)
So in your meaning there's no use for position: relative; in any way? Cause we can use only position absolute in all elements to set their actual state.
Sai Sugandh (5 years ago)
hi there ...... this i a great tute. it just drove a lil bit of css positioning in to my head ....i have been stumped for the last few days.
Hermawan firdiansyah (5 years ago)
Awesime tutorial permit to download this tutorial Thanks
kxshisking (5 years ago)
helped alot, bro!, thank you for taking the time to do this!
Damian Coehoorn (5 years ago)
Georgi Koemdzhiev (5 years ago)
Great video, I was looking for one of these in youtube ! :) One question, I saw your SubLime text software that detects HTML/CSS, I don't know how to make mine ? Thank you in advance :)
João Pedro (4 years ago)
Detects? You mean the intellisense? You can use a package control and then get the package "SublimeCodeIntel"
Zuel Grosme (5 years ago)
Very Good Tutorial. Better than just reading tutorial books.
Maha Swilam (5 years ago)
Thank you so much :)
Deniz T. (5 years ago)
10:10 How can we make the empty space gray? Because it was gray before adding box 1.
Khalid Fallatah (5 years ago)
good vid
Chris Thompson (5 years ago)
good video, helped a lot
UnGenio RapOyente (5 years ago)
nice tutorial
Gaurav Sobti (5 years ago)
place your data inside "div tag" and try mentioning the width in percentage whenever possible. I hope it helped. :)
TheKovodude (5 years ago)
Very nice tutorial! Thanks for the Upload.
mpla mpla (6 years ago)
@havoc2431 the sound is disturbing you need a better mic with voice cancelation; move it away from any sound sorce (like speaker) or electronic device and try again! also try to prepare your code before starting the video and delete usefull elements like (if it IE 9) you will make videos small and more usefull. Anyway thx for the efford :)
Tung Le Anh (6 years ago)
this help me a lotttttt....tks u !
Hugh Jass (6 years ago)
It's not that loud. Adjust the volume. Problem solved.
Ihizz (6 years ago)
I wish rather than saying if we had to do this or that just show the example in the first place!!
CorporalPoon (6 years ago)
thumbed it down because of your shitty loud microphone.
Epik Clan (6 years ago)
Thanks for the tutorial.
js sumith (6 years ago)
That is good example for the position css

Would you like to comment?

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