CSS Position

The position property in CSS specifies how an element is positioned in the document. It controls whether an element is placed relative to its normal flow, its parent, or the viewport.

Position Values

Common position property values include:

static: Default value; the element follows the normal document flow.
relative: The element is positioned relative to its normal position.
absolute: The element is positioned relative to the nearest positioned ancestor.
fixed: The element is positioned relative to the viewport and does not move on scroll.
sticky: The element toggles between relative and fixed depending on scroll position.

Static Position

Static is the default positioning; elements appear in normal flow.

Example

<!DOCTYPE html>
<html>
<head>
<style>
div {
  position: static;
}
</style>
</head>
<body>

<div>This is my first CSS page.</div>

</body>
</html>

Try this code

Relative Position

Relative positioning moves an element relative to its normal position.

Example

<!DOCTYPE html>
<html>
<head>
<style>
div {
  position: relative;
  top: 10px;
  left: 20px;
}
</style>
</head>
<body>

<div>This is my first CSS page.</div>

</body>
</html>

Try this code

Absolute Position

Absolute positioning removes the element from normal flow and positions it relative to the nearest positioned ancestor.

Example

<!DOCTYPE html>
<html>
<head>
<style>
div {
  position: absolute;
  top: 50px;
  right: 20px;
}
</style>
</head>
<body>

<div>This is my first CSS page.</div>

</body>
</html>

Try this code

Fixed Position

Fixed elements are positioned relative to the viewport and remain in place when scrolling.

Example

<!DOCTYPE html>
<html>
<head>
<style>
div{
  position: fixed;
  top: 0;
  width: 100%;
}
</style>
</head>
<body>

<div>This is my first CSS page.</div>

</body>
</html>

Try this code

Sticky Position

Sticky elements behave like relative until a certain scroll position is reached, then they become fixed.

Example

<!DOCTYPE html>
<html>
<head>
<style>
div{
  position: sticky;
  top: 0;
}
</style>
</head>
<body>

<div>This is my first CSS page.</div>

</body>
</html>

Try this code

Best Practices for Position

Use relative for small offsets and adjustments
Use absolute inside a positioned parent for precise placement
Use fixed for headers, footers, or floating elements
Use sticky for menus or sections that should remain visible while scrolling

Common Mistakes with Position

Forgetting to set a parent element as relative when using absolute positioning
Overusing fixed elements that interfere with page flow
Not considering responsive layouts when positioning elements

Tip: Combining position with z-index can control element stacking order for better layout control.