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