CSS Positioning Tutorial for Beginners

welcome to this video where we will talk about a specific css property the position property because if you are new to css it might be clear that with position you can well kind of change the position of an element on your website but the different values we have for this property and how they interact with each other i think this can be confusing sometimes so let's have a closer look at that in this video so why do we use position well let's think about the following setup we have a website so we have an html element we have a body element and we have one two three divs in there so block level elements which means that they occupy the entire space where they are located and each block level element starts in a new line that's clear so far now the question is is there already some kind of position property applied the answer is yes the automatically applied position property is this one it's static static simply means that the elements follow the normal document flow and the normal flow for our block level elements is the one that i just described now the problem with that position static declaration is that if we want to do something like this or like that that's not possible because that cannot be done with that static positioning because as i said static simply means that we position the elements in the normal document flow so if we want to change it like this we should forget about static for now because we need other values that we can use for our position property these values are absolute relative and fixed now there is also another value that can be applied it's called sticky and it's kind of a hybrid between absolute and relative but in this video i really want to focus onto the basics therefore let's forget about sticky for the moment and let's focus on these three values because with these values we can achieve kind of what we saw right here and more but before we dive deeper into these and have a look at how we can apply them on our website let's think about this question what do we change and we basically change the document flow and we change the positioning context now we talked about the document flow and we learned that the static value simply means that we follow the normal document flow but if we use another value we can change that flow and add these properties so the top left bottom and right property and with these properties we can then change the position of the element so top bottom and so on now the problem is that if you apply something like top you need kind of a reference or a positioning context as written right here because we want to move our element down from the top of what so what's our starting point and the starting point is defined by this positioning context this could be the viewport this could be html body or any other element so let's keep these two things in mind and let's now switch to some basic code and play around with that different position properties that we have with this code right here you can find the link to the code of course down there in the video description now this is a really basic code actually we just have an html file with three block level elements i didn't choose this i choose header nav and footer but the idea is the same like the one that we saw on the slides and we have a css file right here with some background color and some change padding and margins just to make sure that it kind of looks the way we had it on the slides now let's have a look at it maybe right here i also opened the chrome developer tools to make things clearer and yeah we can see that we have our html element in the orange color let's inspect that so here we have html here we have our body and here we have the three divs that we saw so let's unselect inspect right here and now the question is how can we change the position of these block level elements that we have let's maybe say we want to position the header right here in the top left corner of the html element now let's go back to the code and let's change that so let's add right here position absolute like that if we now save that and go back to our page and reload it well we can see that the nav element apparently disappeared of course it didn't because if we click right here into our body we can see that nav is still there but it's somehow below our header element now now why is this happening well with position absolute we kind of excluded the header element from the normal document workflow and as the header element is basically not existing anymore it's still there but not from a document workflow perspective this simply means that the nav element moves up one line and the same thing is true for the footer element so this means we were now able to kind of take header out of the normal document workflow but still we didn't position it really how can we do that now well if we go back to our code and now apply top this could also be bottom or left or right of course so we have all the four directions available but let's start with top and right zero and do the same thing with left right here and also type 0. if we save that and go back to our page and reload it well we can see that the position changed now because now the header is in the left top corner of the html element of the html element this looks like the body element right here well the reason is that we have a margin around our header element right here so let's maybe quickly get rid of that margin right here save that and i'll go back and if we reload that now now we can see better we positioned the header element in the top left corner of the html element now why is this happening well with the position absolute declaration we now positioned the head element relative to its containing element and the containing element in the structure we have right here is the html element that's important and this means as the absolute positioning with top 0 and left 0 now refers to the html element well we defined that header should be positioned relative to our html element with a distance of 0 to the top and a distance of 0 to the left and therefore we have the positioning we can see right here now this is how absolute positioning basically works let's now go back to our code and add something to the body element you will see in a few seconds why because right here i will now also add position absolute like that let's save that and let's go back to our page and let's see what happens now if i reload the page well then you can see that two things changed the header element is now in the top left corner of the body element because by adding the position property to this containing element and body is the containing element of the head element this now means that the position that we apply to the head element now refers to the body element if we wouldn't add this position property to the body element position absolute would still refer to the html element so this means we are also able to change the positioning context with this positioning property of this position property we also see that with position absolute the general structure of being a block level element well kind of is not existing anymore because now the elements neither the body nor the header occupies the entire space so this was also changed i said before this is due to the fact that with the position absolute declaration we exclude this element from the normal document workflow in this case of a block level element now let's go back to our code again and change another thing let's now change the body element and add top zero right here like we did with the header let's now press save and go back and reload it and let's see what happens well now the body element is positioned without any distance so top 0 to the html element that's also interesting right because for the body element the containing element and therefore the positioning context is the html element so our positioning top left bottom right is applied relative to the position of the html element in this case this means the positioning of the body element refers to the html element and the positioning of the header element refers to the body element again if we go back and remove that right then we change it this means that if you go back and reload the page right here that header is again positioned in the top left corner of the html element because the positioning context of the head element now isn't body anymore because body doesn't have any position property applied but now again is the html element this is how this generally works now of course we don't only have position absolute we can also use position relative for the body right here and now type relative like that if we save this and go back and reload the page we can see that well it kind of looks like we had it let maybe unselect the inspect tool it kind of looks like the same we had it with absolute positioning because now again the header element refers to the body element because you applied that position property and the position of the body element didn't change at all actually now what if i go back and now again apply top zero like we did it before when we had position absolute right here let's save that let's go back let's reload it nothing changed that's strange right because when we applied position absolute to our body element and then defined that top should be zero we saw that the body element was kind of up here so without any distance to the top of the html element now with position relative this top 0 didn't change a thing let's maybe go back and change it to 50 pixels and save that and now go back again if you reload that then we can see that the body element is moved downwards by 50 pixels and that's the important difference using the position absolute declaration in the body element and then applying top zero simply means that the distance to the containing element so in this case then the html element should be zero applying positioning relative to our body element and then applying top zero simply means that the position of the body element should change by zero applying top 50 simply means that we kind of move or kick down the element by 50 pixels that's an important difference you have to understand and this is also important to understand when you use position relative or position absolute now let's go back to our code and think about more things that we could change because now that we added that position relative declaration right here i would also like to show you something else because if we add position relative also right here in the nav element so position relative like that you can see i didn't change a thing just added the property and i saved that as i just said and if we now go back and reload our page well then you can see something interesting again because we saw that with body when we applied position relative to the body that the body apparently didn't move but now we can see kind of the same behavior because we applied position relative to our nav element so right here and we saw that when we applied position absolute to header in the beginning that the header basically was taken out of the document flow so the nav element moved to the first line because for this element well heather wasn't there anymore now we applied position relative and apparently the element let me unselect the inspect tool and the element is still here so footer is not moving up to the first line now let's try something else let's go back and let's now add top maybe 100 pixels so that we can see what happens save it and go back and now if we reload the page can you see that the nav element now moved down from its initial position by 100 pixels but the footer element so the block level element below this nav element didn't move up because although we are able to move our element with the relative value applied the element is not taken out of the document flow basically so for the other elements the nav element is still existing this is also something important that you have to keep in mind when you work with relative and with absolute because as you can see they defer in a lot of ways however let's maybe go back and change that 100 to i don't know maybe 10 like that let's go back and reload it just to make sure our page looks a little bit more structured now this is absolute and relative but there is one more really important value that you can apply to the position property that i would like to show you and that we talked about on the slide it was this fixed value now let's apply fixed now and let's maybe do this right here in the footer down there so let me write position fixed right here and let's save it and go back and reload the page and now you again see something interesting fixed or a fixed element is no longer part of this normal workflow again because as you can see right here we are not part of the body element anymore but we are somehow well kind of in the middle of nowhere at the moment let's maybe change this by going back and now again add top zero like we did it in the beginning with our position absolute declaration right here let's go back and let's reload that and now it seems that the element is well kind of again in the middle of nowhere but if we inspect that we can see that again the margin is the issue that we have so if we now also remove the margin we had here in the beginning right there and now go back to our page then we see that with position fixed we are able to kind of well add our element to the top of our page and to the top of our page is not correct actually it's not the top of our page position fixed always refers to the viewport that's really important because we saw that with position absolute we could position our element on top of the html element if we want to or at the top border of the html element but if we change that so if we added position relative or absolute to the body element the positioning context changed and therefore we were not able to add our element to the top of the page for example and with position fixed we can do that because as i said before it always refers to the viewport now that's interesting but there are two more things that i would like to show you right here the first thing is that with position fixed we are not only able to kind of position our element depending on the viewport there is also another cool thing and to see this thing we should go back to our code and just add a height or for example 3000 or something like that to the html element the reason is just that i want to be able to scroll through the page now to show you that thing that i really like actually so going back to our page and reloading it we can see that basically nothing changed but if i now scroll down can you see it now we see that our footer element so the element with position fixed applied kind of sticks on top of our page and this is pretty awesome actually because with that we can easily create some fixed navigation bar on top of our page if you wanted for example now that was the first thing that i wanted to show you but there is one last thing in this video that i would like you to know and this last thing is relevant if we apply the following let's go back and let's now change the header maybe right here and let's say that this header now also has a position fixed right here like that and let me now apply left maybe 100 maybe that's too much but we will see because i want to show you something special save that go back that was too much because now we can see that we have both the footer and the header on top of the page because both are related to the viewport and top is defined as but if we now change that to maybe 20 pixels let's see if that's better now yes then it's fine because now you can see that footer and header are kind of at the same position right now but the problem is that footer is on top of header now of course you wouldn't keep it that way but the thing i want to show you now is that you can change that order basically because what if you want to have header above the footer or the other way around like we have it right here well then you have to change the so called that index how does this work well let's go back and let's apply a z index right here of one so always just a simple number could be 100 also or something like that but let's use oh let's use 10 maybe like that and if we now go back right here and load the page we can now see that the header is kind of ahead of the photo element because we gave this that index which kind of defines the well as the names as the z index so if you imagine a page like this then you define if it should be right there or right there that's what you basically do with the z index and if we would now go back to our page and now apply a z index also to the footer like that for example let's maybe apply that index of 11 so a larger number than the one we applied to the header right here if we save that go back and reload the page again we can see that now footer is on top of our header element now that's also something that can be really helpful when you want to position the different elements on your page to make sure that your website looks the way it should look and that's it actually that's this positioning theory video i hope that with the concepts we talked about and with the examples simple examples actually we applied you got a better idea of how the whole positioning in css works now with that you are free to practice of course and to also apply the positioning on your website and with that the only thing i can say right now as in all of my videos thanks a lot for watching and hope to see you in the next videos bye

Channel: Academind

Views: 370,571

Rating: 4.8552961 out of 5

Keywords: css, position, absolute, relative, fixed, tutorial, css position tutorial, css positioning tutorial

Id: wmAP2xvNs08

Length: 20min 14sec (1214 seconds)

Published: Mon Dec 04 2017