XHTML and CSS Tutorial - 38 - Fixed Positioning Video Lecture | Learn Website Designing with XHTML and CSS - Software Development

what is up everybody welcome to your 38
tutorial I'm gonna do this entire
tutorial singing song no actually I'm
not
but anyways and this is Sora we're gonna
be going over something call it fixed
positioning it's the last positioning
that we have to cover in fixed
positioning is actually a lot like
absolute positioning and the idea that
you're going to have a coordinate in
your top left point on your screen and
just like absolute positioning it's
going to move the element absolutely
where it is but the one and the main
difference between fixed positioning and
absolute positioning and it's actually
the only difference is whenever you
scroll your screen if you have an
element that's absolutely positioned and
you scroll your screen down the element
is you know gonna do what you expect it
to do and scroll off the screen but with
fixed positioning that element stays in
the same place on your website and it
doesn't move so it can scroll over other
text or you know it's just gonna stay
there and no matter how hard or how fast
you scroll it's not going to move so
this is kind of a weird type of
positioning but um and by the way I just
want to mention this this is the most
uncommon type of positioning hardly
anyone ever uses this I never used it
when I built a website um but I have to
tell you guys about it because I just
can't you know skip over a topic so
let's go ahead and make a bunch of
paragraph so paragraph and ending
paragraph and let's just write I am The
Sandman let me in easy Metallica
something like that actually says I'm ma
the same man let me in so let's go ahead
and paste this a couple times and let's
just go ahead and copy this
paste there and why not in a couple more
so now just go ahead and why am I doing
this well I'm just want to have a
website where we can actually scroll
down so now you can see we have some
stuff to a scroll and it's not just you
know one paragraph or something so
actually let's go ahead and change up
this first paragraph and make it
something with the ID let's name the
side the tuna and in the paragraph will
just write like tuna make tuna man
mucuna they should definitely make a
McDonald's sandwich called Mik tuna I
will need it sounds disgusting but I'm
just saying they should make it so now
let's just go ahead and apply some
styles to this ID actually I already got
my style tags
how convenient so now in this tuna ID
what do we wanted to do first of all
let's go ahead and give it a border of
like border two pixels solid and Kareem
I guess why the heck not something
that's easy to see and now position
let's go ahead and write fixed just like
that and now let's go ahead and give it
coordinates so you're beginning to see
that this is basically the exact same is
absolute positioning the only difference
is that instead of absolute we're right
fixed so now let's go ahead and give it
left 65 or 64 pixels who the heck cares
save this refresh and see what we got
now our first paragraph is in a box
that's my preposition move this over
more but I'm not gonna wait till AZ for
that that 60 pixels down from the top
and 65 from the left so exactly like
absolute positioning it takes a box and
it positions it absolutely on your
webpage exactly where he told it to but
check this out the only difference is
when absolute you would scroll and this
could go off the screen it would slowly
move up whenever you scroll this it
stays fixed on your webpage just like
that so no matter how hard I scroll try
to get it off it's just staying there
and it's annoying so anyways like I said
people generally don't use fixed
whole lot when making web pages because
I mean have you ever been to a web page
and just did that in back yeah there's a
reason I scrolled to get you out of my
sight and you're still there you know so
anyways I just wanted to go over it
because I mean I thought it was
appropriate so anyways that's the
difference between apps flew and fixed
it's one difference but it's a big
difference so I guess if you wanted to
be a real idiot then you could do
something like this go ahead and delete
that and then just go ahead and write
fixed border and write like one pixel
solid gray and I got an idea for the top
let's put it like 55 pixels and for the
left
let's put like 290 pixels so I guess if
you were a jerk you can just refresh
this and there'd be they load the web
page and then they would see this dot on
the screen and like oh man my monitor
scratch is it or is it the web page and
then their scroll down and see that that
dot actually stays there and they're
like oh well I guess my monitor is just
scratched
oh so anyways if you wanted it to be you
know addy head you could do that I'm
just saying
so anyways that is the beauty of fixed
again I guess that's actually the only
reason you would ever want to use the
fixed positioning if you want to just
make a fake scratch on their monitor so
yeah I know it's dumb but hey it's all I
got
so anyways thank you guys for watching
this story and the next story will have
no idea what I'm gonna be going over but
it's gonna be amazing
so anyways like I said thanks thanks for
subscribing thanks for watching my
videos and thank you for just being you
so anyways I'll see you in the next
video