What is position relative?

Moves element relative to itself.

What is position absolute?

Positions relative to nearest positioned parent.

CSS Position - Learn HTML | Revochamp

Name: CSS Position
Availability: InStock
Author: Revochamp

What is CSS Position?

The position property controls how an element is positioned in the document using top, right, bottom, and left values.

Position Types

Value	Description
static	Default position
relative	Relative to itself
absolute	Relative to nearest positioned parent
fixed	Fixed to viewport
sticky	Switches between relative and fixed

Static Position

CSSRead-only

div {
  position: static;
}

div {
  position: static;
}

Relative Position

Moves relative to its original position.

CSSRead-only

div {
  position: relative;
  top: 10px;
  left: 20px;
}

div {
  position: relative;
  top: 10px;
  left: 20px;
}

Absolute Position

Positions element relative to nearest positioned ancestor.

CSSRead-only

div {
  position: absolute;
  top: 0;
  right: 0;
}

div {
  position: absolute;
  top: 0;
  right: 0;
}

Fixed Position

Stays fixed relative to viewport.

CSSRead-only

div {
  position: fixed;
  bottom: 10px;
  right: 10px;
}

div {
  position: fixed;
  bottom: 10px;
  right: 10px;
}

Sticky Position

Acts like relative until a scroll threshold is reached.

CSSRead-only

div {
  position: sticky;
  top: 0;
}

div {
  position: sticky;
  top: 0;
}

Z-Index

Controls stacking order of positioned elements.

CSSRead-only

div {
  position: absolute;
  z-index: 10;
}

div {
  position: absolute;
  z-index: 10;
}

Positioning Example

CSSRead-only

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 0;
  left: 0;
}

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 0;
  left: 0;
}

Best Practices

Use relative for parent containers
Use absolute inside positioned parent
Use fixed for UI elements like buttons
Use sticky for headers/navigation

Common Mistakes

Using absolute without parent positioning
Overusing fixed elements
Forgetting z-index stacking issues
Misunderstanding sticky behavior

Conclusion

CSS positioning is essential for layout control. Understanding each type helps build flexible and precise UI designs.

Value

Description

static

Default position

relative

Relative to itself

absolute

Relative to nearest positioned parent

fixed

Fixed to viewport

sticky

Switches between relative and fixed

CSS Position

CSS Position

What is CSS Position?

Position Types

Static Position

Relative Position

Absolute Position

Fixed Position

Sticky Position

Z-Index

Positioning Example

Best Practices

Common Mistakes

Conclusion

Try it yourself

Test Your Knowledge

Frequently Asked Questions

Need help?

CSS Position

CSS Position

What is CSS Position?

Position Types

Static Position

Relative Position

Absolute Position

Fixed Position

Sticky Position

Z-Index

Positioning Example

Best Practices

Common Mistakes

Conclusion

Try it yourself

Test Your Knowledge

Frequently Asked Questions

Need help?