5. Positioning #
Created Sunday 25 April 2021
Attribute: position
Values: 5 values available.
static
- the default, per document flow.relative
- moves only if specified w.r.t the normal document flow. Not used generally.absolute
- removed from document flow, set w.r.t the latest non-static ancestor. If nothing is found, set w.r.t body. Default is (left=0, top=0).top
,right
,left
andbottom
are needed to be set.fixed
- fixed w.r.t the viewport, no matter what.top
,right
,left
andbottom
are needed to be set.sticky
- behaves likerelative
(i.e. normal), until settop
,right
,bottom
orleft
value becomes “true”. Behaves likefixed
from then on (if motion continues). If multiple sticky elements (on the same trail) are there, the newer activated one will replace the older one.
Except position: static
, all other position types can specify top
, bottom
, left
or right
attributes with a length as value.
- short for position type
- These are used to define how a selection is position.
- All 5 positions, < 10 mins
- Sticky positioning < 8 min
- MDN position demo