learn2kode.in

Menu

CSS Tutorial

Menu

CSS Positioning

CSS positioning controls how elements are placed on a webpage. It defines the layout behavior and determines how elements interact with each other visually.

There are five main position values in CSS:

1. static (Default Positioning)

  • This is the default position for all HTML elements.
  • Elements follow the normal document flow.
  • Top, left, right, bottom properties do not work.
Copy Text 
.element {
  position: static;
}

2. relative

  • Element stays in the normal flow, but you can shift it using top, left, right, bottom.
  • The space originally reserved for the element remains.
Copy Text 
.element {
  position: relative;
  top: 10px;
  left: 20px;
}

3. absolute

  • Removed from the normal flow.
  • Positioned relative to the nearest positioned ancestor.
  • If no positioned ancestor exists, it positions relative to the viewport.
Copy Text 
.element {
  position: absolute;
  top: 20px;
  right: 10px;
}

4. fixed

  • Stays in the same place even when scrolling.
  • Positioned relative to the viewport.
  • Often used for sticky headers, floating buttons, etc.
Copy Text 
.element {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

5. sticky

  • Acts like relative until a scroll threshold is reached.
  • Then it behaves like fixed.
Copy Text 
.element {
  position: sticky;
  top: 0;
}

CSS Position Properties

Once an element has a position value (other than static), you can use:

Property Description
top Offset from the top edge
right Offset from the right edge
bottom Offset from the bottom edge
left Offset from the left edge
z-index Controls stacking order (front/back)

z-index

Controls which element appears in front when elements overlap.

Copy Text 
.front {
  position: absolute;
  z-index: 10;
}

.back {
  position: absolute;
  z-index: 1;
}

When to Use Each Position Type

Position Type Best Use Case
static Default layout, no special positioning
relative Slight adjustments, anchors for absolute children
absolute Popups, tooltips, exact placements
fixed Sticky navigation, floating elements
sticky Headers that stick while scrolling
CSS Flexbox