CSS Position Examples

Types of positioning:



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. ;)


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.


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.

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.