XHTML and CSS Tutorial - 37 - Relative Positioning Video Lecture | Learn Website Designing with XHTML and CSS - Software Development

what is going on guys it's Bucky and
welcome back to your 37th XHTML and CSS
tutorial and in this tutorial as
promised I'm gonna be talking to you
guys about a different kind of
positioning and that's called relative
positioning now relative positioning is
kind of similar to absolute positioning
but it's also very different
so you're saying how can it be similar
and extremely different but it is so let
me go ahead and show that to you guys
let's go ahead and first make a couple
paragraphs on the screen so P P and just
go ahead and like right first let me
just go ahead and copy this make like
four paragraphs or something that'll be
fine
first second third and fourth but give
this third one an ID oops
I'm a computer program in computer
program and you put equal sign twice and
that's what I thought I was doing so
anyways ID equals third by the way you
guys should check out my computer
programming tutorials so pretty cool
that's just a side note anyways now for
our third paragraph let's first of all
give it absolute positioning because
that's what we know already so in order
to do that go ahead and make your ID
third and go ahead and give it a border
of like whoa-ho definitely spread that
around border one pixel solid green
that'll make it easy to see and what
else can we do position:absolute
and now let's go ahead and move it top
sixty pixels and also left 30 pixels I
don't like my top didn't left to be the
same so anyways if we go ahead and save
this what we're gonna see is this we're
going to see I mean four paragraphs on
the screen and then we're gonna see that
third paragraph move sixty pixels down
from the stop point right here in 30
pixels right so somewhere right in there
so check it out we have the first second
third and this third box right here from
the top left corner of your screen is
moved down 60 pixels and right 30 pixels
because that's what absolute positioning
does it takes this coordinate right here
and it moves your box in relation to
there so let's go ahead and now instead
of absolute type in relative and save
this and look how it changes the box is
now down more and over to the right the
same sorry saying alright what exactly
is going on because this is kind of
confusing so instead of 60 pixels from
the top it's now a lot more so why did
this happen well relative positioning is
different than absolute positioning in
the idea that instead of moving it
absolutely from the top left point right
here it moves it in relation to where it
would normally be so instead of having
the origin right here in moving 60 down
30 across the origin is wherever it
would be normally which is somewhere
right in here and from that point it
moves it 60 down and 30 across so that's
why it's actually more than 60 pixels
down from the very top of your screen
again if I was to move this absolutely
it would be 60 pixels down from the top
and 30 pixels over but since I'm moving
it relatively it says all right you
started out well let's go ahead and
get rid of this cut this so you started
out right here by default so here is
your starting point right here and now
you have the CSS rule that says I want
to move this 60 pixels down from where I
was relative and also 30 pixels over so
it's going to take it from right here
move it 60 down and 30 over so that's
why it ends up right here so anyways
that's the difference between absolute
and relative absolute moves it from the
top left point on your screen and
relatives move it from where it was in
relation to the rest so now you can see
that we come across another problem that
it doesn't really help - you might be
saying art right I'm just going to make
everything relative then instead of
absolute because the relative is better
well we come across this problem you see
instead of just taking this piece out
right here in continuing with flow where
1st 2nd 4th instead of just moving this
4th up and fill in the gap we now have a
space or a gap of where that box used to
be right here so with absolute we came
across the problem of things overlapping
and now relative we come across the
problem of whenever we take something
out from the natural flow we have a huge
gap of where it used to be and it
doesn't look like anything really fits
in there so anyways keep those in mind
whenever you're using these two
different types of positioning and by
the way let me say this people usually
don't layout a web page all absolute or
all relative this isn't like a choice
where you choose one or the other
yes you can make an entire web page all
absolute or all relative but you usually
use them use them in conjunction with
one another for example you might have
your outside box relative in every
inside box inside that would be absolute
that is a common technique that people
use but anyways I just want to you know
get that in your head because in case
you thought I was teaching guys the
different ways of laying out a website
don't think like that think how can I
use these techniques together in order
to get my webpage the look that I need
to achieve so anyways there is one last
type of
that I'm gonna be teaching you guys
about and then after that I'm gonna show
you guys how to tie everything together
and give your website the exact look and
feel that you guys want and it's gonna
be awesome you guys are going to be
making beautiful websites in no time so
for now thank you guys for watching
don't forget to subscribe and I'll see
you in the upcoming videos