Styling with CSS - Part 16 - Positioning Video Lecture - IT & Software

welcome to the w3schools CSS positioning
tutorial the CSS positioning properties
allow you to position an element it can
also place an element behind another
specify what should happen when an
elements content is too big elements are
positioned using the top bottom left and
right properties however these
properties will have no effect unless
the position property is set first they
also work differently depending on the
positioning methods there are four
different positioning methods let's
start static positioning all HTML
elements are positioned static by
default a static positioned element is
always positioned according to the
normal flow of the page look at these P
elements they appear one after the other
this is what we call normal flow
elements we position static are not
affected by the top bottom left and
right properties now let's look at fixed
positioning element with a fixed
position is position relative to the
browser window like this P element the
position property is set to fixed and
its position 30 pixels from the top of
the page 5 pixels from the right of the
page it will not move even if the window
is scrolled elements with fixed position
are removed from the normal flow so the
document and the other elements behave
like the fixed positioned element does
not exist since they are removed from
the normal flow elements with fixed
position can overlap other elements
by this I see that the text overlaps the
other elements let's look at relative
positioning a relative position element
is positioned relative to its normal
position this heading is moved right
according to its normal position its
position property is set to relative and
it's left property is set to 20 pixels
so it's positioned 20 pixels from the
left relative to its normal position
let's try moving it now this heading is
smooth left according to its normal
position smooth by setting the left
property to minus 20 pixels so its
position minus 20 pixels relative to its
normal left position let's try moving
that to relative position elements can
be moved and overlap other elements but
to reserve space for the element still
preserved in the normal flow let's see
what happens if we overlap two elements
here
now these two elements overlap but the
reserved space for the element is still
preserved now let's look at absolute
positioning element with an absolute
position is positioned relative to the
first parent element that has a position
other than static this heading has some
absolute position but it has no parent
elements with a position other than
static so it's positioned relative to
the page as position absolute and let's
position 100 pixels from the left and
150 pixels from top let's try moving it
around now it's positioned 200 pixels
from the left and 200 pixels from the
top of the page absolute positioned
elements are removed from the normal
flow so the document and other elements
behave like the absolute position
element does not exist since they are
removed from the normal flow elements
with absolute positioning can overlap
other elements like this let's look a
bit closer at overlapping elements when
elements are positioned outside the
normal flow they can overlap other
elements the set index property
specifies stack order of elements this
is how you specify which element should
be placed in front of or behind other
elements an element with greater stack
order is always in front of an element
with lower stack order an element can
have both a positive or negative stack
order now we change the stack order for
this image from minus 1 to 1 and now it
appears in front of the text
but what happens if the content of
element is too big to fit in the
specified place the overflow property
specifies what to do if the content of
an element is bigger than the elements
box here the overflow property is set to
scroll so the content that won't fit is
still there but you have to scroll to
see it air the old flow property is set
to hidden so the content that won't fit
is hidden from the user the default
value is visible if the overflow is set
to visible the content that won't fit
overflows from its box on the w3schools
tutorial page there are more examples
and we list all the CSS positioning
properties and there's a link for each
property that goes to our CSS reference
where we can find more information for
any CSS property and this concludes our
tutorial for CSS positioning thank you
for watching