CSS Tutorial for Beginners - 35 - Fixed position for an element Video Lecture | Learn CSS: A Comprehensive Tutorial for Web Developers - Front-End Programming

welcome to the 35th tutorial on
beginning CSS in this video we're going
to look at how to fix the position of an
element and basically all we do is
switch the position property to fixed
and the best way to show you how the
fixed position works is to use it
against an element that's in an absolute
position and one thing also I want to
point out is that you use the top and
left properties so it's the same thing
both will use those both the fixed and
the absolute so there's no difference
there the only difference is we are
going to absolutely keep this element in
a fixed position it will not move and I
mean that literally now the best way to
show you again is to show you how it
works against an element that's in an
absolute position so let's actually
resize this browser and the way to see
this is actually when you use the
scrollbar so let's let's resize this a
little bit up here okay so if I scroll
this you see how that div 1 is not
moving it will not move it does not
adjust accordingly it will stay 10
pixels from the top it will not move
from that top position you can see that
it's not moving whereas the elements in
absolute position are and so that's
really it that's the main difference
it's pretty easy to understand now I
will tell you that I do not use fixed
positioning very much I prefer to use
absolute positioning and the reason is I
think it's a little bit unnerving I
guess to the people that are browsing
your web page I think it's more natural
to have the elements move accordingly
but there may be some times you will
want to use fixed positioning and I've
noticed in some websites they will use
this for advertisements right and they
want to make sure it's always plastered
in the window frame and so you can't
really get rid of it it will always stay
in a particular spot but again I prefer
absolute positioning and also I like the
float elements and use elements in the
flow and so again I don't use fixed as
much but I wanted to show you what it
was all about now there is yet another
parameter that we can put in here it's
called relative yes there is relative
positioning but that's really for a more
advanced CSS tutorial
and actually I don't even really use
that a lot either I get unpredictable
results with relative positioning but
maybe in a future series I will talk
about that