LCWD LogoLCWD
C

CSS Handbook

Clean • Professional

CSS Positioning

2 minute

What is CSS Positioning?

CSS positioning defines how an HTML element is placed in the document. It determines whether an element follows the normal flow of the page or is manually adjusted using properties like top, right, bottom, or left.

Positioning not only affects placement but also stacking order and visibility, which are essential for building complex layouts like modals, dropdowns, fixed headers, and tooltips.

Syntax:

selector {
  position: value;
}

Where value can be:

  • static
  • relative
  • absolute
  • fixed
  • sticky

Types of CSS Position :

learn code with durgesh images

static (Default)

  • This is the default positioning for all HTML elements.
  • Elements follow the normal document flow.
  • Top, bottom, left, and right properties have no effect.
div {
  position: static;
}

2. relative

  • The element remains in the normal document flow, but you can move it relative to its original position.
  • You can use top, right, bottom, and left to adjust its position.
  • Space for the element in the normal flow is still preserved.
div {
  position: relative;
  top: 20px; /* Moves down 20px from its normal position */
  left: 15px; /* Moves right 15px */
}

3. absolute

  • The element is removed from the normal flow, meaning it does not affect or get affected by other elements.
  • Positioned relative to its nearest positioned ancestor (relative, absolute, or fixed).
  • If no ancestor is positioned, it is placed relative to the document body.
div {
  position: absolute;
  top: 50px;
  left: 100px;
}

4. fixed

  • The element is removed from the normal flow and positioned relative to the browser viewport.
  • It does not move when the page is scrolled.
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

5. sticky

  • Combines relative and fixed behavior.
  • The element behaves like relative until a scroll threshold is reached, then it sticks like fixed.
  • Requires top, bottom, left, or right to define the sticky point.

th {
  position: sticky;
  top: 0; /* Sticks to the top when scrolling */
  background-color: #fff;
}

CSS Positioning Complete Example

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Positioning Example</title>
<style>
  body {
    margin: 0;
    font-family: Arial, sans-serif;
  }

  .container {
    position: relative;
    height: 400px;
    border: 2px solid #333;
    padding: 10px;
  }

  .static-box {
    position: static;
    background: lightblue;
    padding: 10px;
    margin-bottom: 10px;
  }

  .relative-box {
    position: relative;
    top: 20px;
    left: 20px;
    background: lightgreen;
    padding: 10px;
  }

  .absolute-box {
    position: absolute;
    top: 50px;
    right: 10px;
    background: lightcoral;
    padding: 10px;
  }

  .fixed-box {
    position: fixed;
    bottom: 10px;
    right: 10px;
    background: lightgoldenrodyellow;
    padding: 10px;
    border: 1px solid #333;
  }

  .sticky-box {
    position: sticky;
    top: 0;
    background: lightsalmon;
    padding: 10px;
    margin-bottom: 10px;
  }
</style>
</head>
<body>

<div class="sticky-box">Sticky Box (sticks on top when scrolling)</div>

<div class="container">
  <div class="static-box">Static Box (default)</div>
  <div class="relative-box">Relative Box (moved 20px)</div>
  <div class="absolute-box">Absolute Box (top-right corner)</div>
</div>

<div class="fixed-box">Fixed Box (always visible)</div>

<div style="height: 600px;"></div> <!-- For scroll testing -->
</body>
</html>

 

Article 0 of 0