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

welcome to the thirty fourth tutorial on
beginning CSS today we're going to look
at how to absolutely position an element
in your web page and that's exactly what
it is you are absolutely telling the
browser where you want that element and
the property that we use is the position
property and we specify you guessed it
absolute and then the two other key
properties are the top property and the
left property and so you can see the
absolute position two element right here
so what we're basically doing is saying
hey absolutely put this in the following
place from the top
I want 75 pixels down and from the left
side of the browser
I want it 150 pixels from the left side
of the browser and then we get our
placement right here now we could also
place this element on the right so we
just switch this from left to right
let's hit save and now it's positioned
from the top and the right side and we
can also do this on the bottom by the
way you could switch this to the bottom
and also play around with the right and
left bottom part of the page too so it's
pretty simple now let's go ahead and
switch this back to the left and let's
talk about the flow now this element
right here is in the flow and what I
want to show you is that absolute
positioned elements are remove 100% from
the flow and it's similar to floated
elements however there is a key
difference I want to show you that right
now so let's go ahead and make this ten
pixels and we'll make this 15 pixels
from the left so 10 pixels from the top
15 pixels from the left let's save this
let's hit refresh and you will notice
that this just went right over the
paragraph black element in the flow it
did not even respect the borders it just
pasted it right over the top and that's
what I meant when it is 100% removed
from the flow now this has some
advantages actually you can overlay
elements and create some nice effects
doing that and we'll get to that in the
CSS layout series but I just wanted to
make the point that the absolute
position elements are completely removed
from the flow now in the last video we
talked about how float elements are
outside of the flow too but not
completely so it's not a hundred percent
and what I mean by that is that elements
that are floated will respect the
boundaries of an element that's in the
flow and let's do that let's go ahead
and float this element now so we're not
going to absolutely position the element
let's just float this to the left and
remember all we need with a float is to
give it a width so let's go ahead and
save this
we'll hit refresh and now you can see
that this floated div element respected
the boundaries of the P element but when
we absolutely position an element it
does not okay that is going to do it for
this video I will see you guys in the
next video