CSS Positioning Examples

1. Static Position (Default)

Static Position - No special positioning applied

2. Relative Position

Relative Position - Offset by 10px

3. Absolute Position

Absolute Position - Positioned relative to this example box

4. Fixed Position

Fixed Position - Stays at bottom-right of viewport

5. Sticky Position

Sticky Position - Sticks to the top of viewport when scrolling

This text is here to demonstrate scrolling behavior.

This text is here to demonstrate scrolling behavior.

This text is here to demonstrate scrolling behavior.

6. Center Element with Absolute Position

Centered (Absolute)

7. Center Element with Fixed Position

Centered (Fixed)

8. Z-index with Absolute Position

Box with z-index 1
Box with z-index 2

9. Center with Margin Auto (Horizontal only)

Centered horizontally with margin: auto