CSS Tutorial for Beginners - 40 - Relative positioning Video Lecture | Learn CSS: A Comprehensive Tutorial for Web Developers - Front-End Programming

in this video we're going to take a look
at relative positioning and we have
examined pretty much every type of
positioning so far except for relative
so we'll go over that in this video
now to understand relative positioning
we also need to talk about static
positioning and absolute positioning as
well now we've already talked about
absolute positioning and we've already
talked about static now you may say wait
a minute when did you talk about static
positioning I haven't heard of that term
yet well we have talked about it it's
the default positioning the browser sets
for an element and so it means it's in
the flow and we've talked all about the
flow so static is the flow so we already
know what that's all about and right now
if you take a look at the web page all
of these elements the body the div the
paragraph elements this div and it's
paragraph elements are all in the flow
by default they are all static because I
have not specified that they are
relative I have not specified an
absolute position so by default
everything is in the flow and that's a
good thing now just to emphasize that
point let's go ahead and put in a
position a static position for this
square down here and you're going to see
that it doesn't move so we'll do that
over here and we'll just put in static
let's go ahead and save this let's
refresh our page and you can see it
didn't move because it already was in
static that's the default so we're not
accomplishing anything by doing this so
let's go ahead and remove that and save
this now relative and absolute
positioning are pretty much the same
thing they use the same properties atop
a bottom a left and a right and same
thing for absolute top bottom left right
and you will remember when we did the
absolute positioning when we put a pixel
count here so if we say 10 pixels from
the top it'll move it down 10 pixels
from the top if we said 10 pixels from
the left it'll move it 10 pixels from
the left now the way this works you
rarely will use all four of these
properties you will either specify a top
or bottom and a left or right but not
all four so you'll pick one top or
bottom and then you'll pick one left or
right so for instance for relative which
we're going to start out first we'll
take
top and a left will specify that and so
let's do that now so I created an ID for
the square so let's go ahead and update
that here and I'll just copy and paste
this in here so that's what we're doing
we're going to put in a position of
relative and we're going to save five
pixels from the top and five pixels from
the left and let's go ahead and put that
in for our paragraph right here our red
paragraph here because I created an ID
for that fourth paragraph so let's go
ahead and copy and paste the same
parameters okay all right so let's go
ahead and save this let's refresh this
and there you can see it moved a little
bit about actually this pixel thing got
lopped off and I copy and paste so let's
go ahead and put that in here and we'll
save this again sorry about that
and we'll refresh this and there you can
see now the way relative positioning
works and here's the key point position
determined by first static element it
touches so in this case so let's take a
look first at the paragraph and it's
actually the same thing for the square
both of these ran into the first static
element which was this paragraph on the
top so it is five pixels down from the
edge of this paragraph static element
okay that's in the flow and it's also
five pixels from the left of the div
which is a static element right our main
one we haven't put any positions in here
so this is by default static so again it
hits this paragraph
static element and then on the left it
hits the div and so that's relative
position it's relative to the static
elements around it and so that's the big
difference between relative and absolute
read this statement right here position
determined by first non-static element
so what does that really mean absolute
will pay absolutely no attention to any
static element so it will ignore all
these paragraphs and even the divs
themselves because they are static it
will only render against the browser
window actually because everything
aesthetic it won't even pay attention to
the body because the body is by default
static and to emphasize that point let's
switch this to absolute now we're just
going to play around with the square now
so let's get rid of the position
parameter for
paragraph let's save this and keep an
eye on the square we're just going to
switch this to absolute and we're going
to save this we're keeping the same
properties so let's go ahead and refresh
this and boom look at that it's now
rendering up against the browser window
that's because like I said all the
elements within our page are static so
it won't pay attention to anything in
our HTML document it will render right
up against the browser window it has to
stop somewhere and that's where it
stopped and to emphasize that let's
actually switch this around let's
actually switch the top and let's say
the bottom and let's switch this to
right and let's go ahead and save this
well refresh our page again and now it's
rendered down on the bottom right side
of the browser and again it paid no
attention to any of our div or paragraph
elements because they are all static now
you might ask the question well how do I
get this absolute positioned element to
stay within this div element tag how do
I get it to stay inside here and there
is a specific way to do that and it
actually involves using relative and the
way we do that is we actually have to
create a position in here for relative
so let's do that we'll just copy and
paste this in here and again we're
working against our main two element and
we'll switch this to relative we'll hit
save now when I hit refresh this Square
now should go over to this divs bottom
right so if we hit refresh boom there it
goes because now take a look this main
to now is no longer static it's
non-static because we switched it to
relative so now this square can no
longer escape the div because it ran
into its first non-static element and
that stopped it now if you take a look
at our main two div we didn't even have
to put any properties we only had to
turn it into a non-static element and
that stopped this Square from moving
outside our div so again is not really
using relative it's actually acting more
like a static we just flipped it to
non-static by using this position but we
didn't put any properties in here so
it's really acting more like a static
element even though it isn't I guess
that's the best way to describe it so
that's one of the ways you can use
relative and that's actually one of the
big ways you can use raw
positioning now let's switch this
paragraph again back to relative so
we'll do that and let's actually do
another top and we'll put in a left and
let's save this will hit refresh whoops
nope sorry we wanted this relative and I
copy pasted absolute okay let's save
this again and there you can see the
paragraph now has moved five pixels from
this static element and from the left
five pixels from the div element now
usually you will not use relative
positioning in your main content panels
that's just not the way you're going to
do this because if you take a look this
looks kind of weird right these three
paragraphs look much better because they
are in the flow now if you wanted to
align these with this paragraph you'd
have to use relative positioning on the
rest of these and that's just not a good
way to do your website so I only use
relative positioning for a few different
scenarios one of them is what I just
showed you where we need to set
something at an absolute position within
your main content panel and you need to
keep it within that content panel then
you will set the div to relative just to
make it non static and that will keep
the absolute position element inside
your div so that's really one of the
primary ways you use relative you
actually won't use it to move around
content in your main content panels but
there are a couple scenarios where you
will use it for smaller panels such as
your navigation bar where you need to
nudge something and so I'll show you
that right now so I'm just going to go
ahead and close all these out and I'll
pull up a nav bar to show you how it's
used in a smaller panel okay so here I
have a horizontal menu in a navigation
bar and like I said relative positioning
is good to use if you have to do things
very small you don't want to use it out
in your large content panels but you can
use it for smaller purposes like I said
inside your nav bar where you have to
nudge something a little bit and I'm
going to show you an example of that
right now now this is a horizontal menu
don't worry about this right now
we'll be talking about this in a few
videos but for now I want to show you
how I'm using relative positioning with
this horizontal menu now you can see
I've specified it right here
and we're using this against the Hoover
remember the Hoover is when you hover
over a link and you can format certain
things in this case we're just setting a
background to black but you will notice
here that there's a little green right
here at the bottom you can see that
can't you see that so it hasn't
completely covered the area and that's
where relative positioning is nice to
use so we just need to alter this a
little bit so if you take a look again
there's a little bit of green here we
want to nudge this down a little bit
more and by the way you can use minus
values for the top bottom and left/right
properties and I'll explain why I'm
using a minus value when we do
horizontal menus but again we want to
nudge that down a little bit so 0.5
didn't really work let's set this to 0.3
and let's save this and let's refresh
this and now you can see it pretty much
covers the entire area so again that's
what you will use relative for to nudge
things just in the smallest little way
we wouldn't want to set this to absolute
because then it wouldn't respect any of
the static elements around it so again
that's why we want to use relative here
rather than absolute positioning okay
that is a good start on relative
positioning I will see you guys in the
next video