CSS Position Examples
Types of positioning:- static: default, will be positioned in normal flow of page.
- relative: positioned relative to its 'normal' position; following items will not be re-positioned to fill any gaps as result of relative re-positioning
- absolute: positioned relative to nearest previous positioned ancestor object; comes out of normal flow of doc and is guided only by direct ancestor.
- fixed: fixed position relative to viewport. out of normal flow. NOT covered here.
- sticky: position depends on where user is with scrolling; can start in one position and then move with scrolling. NOT covered here.
Examples
Static
Here is a div. Has border and background color but no positioning applied applied, so will be 'static'. Just in the normal flow of things. Cool. Easy. No hassles. ;)Relative
Text overlay on the image:
The insurmountable Pilsner Urquel. (repositioned by 'top: -25px')
Other text below the image. Notice gap because other text did not move up when text in div moved up.
Absolute
this text here
*putting break here as spacer because otherwise text in absolute
positioned dev will overlap with what comes next, since it is
out of document flow.*
Relative + Absolute
Combine relative and absolute for control.
- div with 'position: relative' that holds image and separate div with text
- div with 'position: absolute' has top/left set relative to outer/ancestor div holding image.
The inimitable Pilsner Urquel. (positioned as absolute div within relative div)
Text below the outer/ancestor relative div flows tightly because 'absolute' div is taken out of doc flow.