| static |
- The default value.
- No change to normal flow.
- top, right, bottom, left, and z-index have no effect.
|
| relative |
- Offset the element from its normal flow.
- Other elements are not affected.
- For example, top: 10px; left: 5px; moves the element down 10 pixels and to the right 5 pixels.
|
| absolute |
- Reposition the element based on its container.
- The element is removed from the normal flow, so surrounding elements are affected.
- Margins do not collapse.
- For example, top: 10px; left 5px; positions the element down 10 pixels and to the right 5 pixels from the container's upper left corner.
|
| fixed |
- Similar to absolute, but the element is positioned relative to the initial container, not the immediate ancestor.
- I.e., the element is placed at a specific location on the screen.
- The element does not scroll with the rest of the page.
|
| sticky |
- Positioned according to the normal flow, but does not scroll past its offset.
- Useful for keeping headers at the top of scrolling tables or lists.
|