Position
The CSS property position sets how an element is positioned within a document. It
establishes
how top, right, bottom and left will work
To demonstrate this, I've set up another div using the id pos
Static
Here, the middle div has position:static;
Relative
Here, the middle div has position:relative;
In addition, the top and left attributes have been changed to 50px each, which
pushes the
element DOWN 50px and to the right (from the left) 50 px too!
In essence, the block is positioned where it would be relative to its
own position
Absolute
Here, the middle div has position:absolute;
In addition, the top and left attributes have AGAIN been changed to 50px each
However, absolute will remove an element from normal document flow, and
position it
closest to its closest positioned ancestor, or relative to the initial
containing
block
Thus, if something is absolute, but not nested inside a POSITIONED (i.e.
with a
position set to something other than static) element, it will be positioned relative to
the
containing block, which is usually <body>
In my example, the section the blocks are contained in is a positioned element,
with the
position changed to relative. In addition, I've made it so the middle block has had its
position
changed significantly. Inspect to check!
Fixed
Here, the middle div has position:fixed;
In addition, the top and left attributes have been changed to 0 and 400px
This is the reason that BLOCK is hanging over in this page!!!
Basically, if something is positioned as fixed, then it will always be
positioned
relative to the overall containing block! (Unless an ancestor has a transform,
perspective
or filter property contributing to the containing block info)
Move on to Transitions