Programming for beginners: Understanding position: relative in CSS: A Detailed Guide

The element is positioned relative to its normal position in the document flow. Position properties (top, right, bottom, left) shift the element from its normal position. Other elements are not affected by this shift and will not move to fill the gap left by the relatively positioned element.

When an element has position: relative, it remains in its original place within the document flow. It still occupies space as if it were in a static position (the default position for all elements).

How offset works?

The top, right, bottom, and left properties define how far the element is moved relative to where it would have been in the normal document flow. The actual layout of surrounding elements is not affected by the top, right, bottom, or left offsets applied to the relatively positioned element. It is just shifted visually from its original position.

Positive values move the element in the specified direction.

· top: 20px; moves the element down by 20 pixels from its original position.

· right: 30px; moves the element left by 30 pixels from its original position.

· bottom: 10px; moves the element up by 10 pixels from its original position.

· left: 40px; moves the element right by 40 pixels from its original position.

Negative values move the element in the opposite direction.

· top: -20px; moves the element up by 20 pixels from its original position.

· right: -30px; moves the element right by 30 pixels from its original position.

· bottom: -10px; moves the element down by 10 pixels from its original position.

· left: -40px; moves the element left by 40 pixels from its original position.

Go through the following HTML and CSS to understand how position: relative works.

relative-position.html

<!DOCTYPE html>
<html>
  <head>
    <title>Relative Position Example</title>

    <style>
      .flex-container {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
      }

      .parent {
        background: #dc9096;
        width: 300px;
        height: 150px;
        color: white;
        font-size: 1.2em;
        margin: 30px;
        padding-top: 20px; /* Prevents margin collapse */
      }

      .parent .child {
        height: 30px;
        margin-top: 10px;
        align-items: center;
        justify-content: center;
        display: flex;
      }

      .child1 {
        background: #f0d43a;
        color: black;
      }

      .child2 {
        background: #22b2da;
      }

      .child3 {
        background: #3b4a6b;
      }

      .parent1 .child1 {
        /* Positioning adjustments */
        position: relative;
        left: 30px;
      }

      .parent2 .child1 {
        /* Positioning adjustments */
        position: relative;
        right: 30px;
      }

      .parent3 .child1 {
        /* Positioning adjustments */
        position: relative;
        bottom: 30px;
      }

      .parent4 .child1 {
        /* Positioning adjustments */
        position: relative;
        top: 30px;
      }

      .parent5 .child1 {
        /* Positioning adjustments */
        position: relative;
        top: 30px;
        left: 30px;
      }

      .parent6 .child1 {
        /* Positioning adjustments */
        position: relative;
        top: 30px;
        right: 30px;
      }

      .parent7 .child1 {
        /* Positioning adjustments */
        position: relative;
        bottom: 30px;
        left: 30px;
      }

      .parent8 .child1 {
        /* Positioning adjustments */
        position: relative;
        bottom: 30px;
        right: 30px;
      }

      .parent9 .child1 {
        /* Positioning adjustments */
        position: relative;
        left: -30px;
      }

      .parent10 .child1 {
        /* Positioning adjustments */
        position: relative;
        right: -30px;
      }

      .parent11 .child1 {
        /* Positioning adjustments */
        position: relative;
        bottom: -30px;
      }
    </style>
  </head>

  <body>
    <div class="flex-container">
      <div class="parent">
        <div class="child child1">Without any positioning</div>
        <div class="child child2">Child 2</div>
        <div class="child child3">Child 3</div>
      </div>

      <div class="parent parent1">
        <div class="child1 child">{left: 30px}</div>
        <div class="child2 child">Child 2</div>
        <div class="child3 child">Child 3</div>
      </div>

      <div class="parent parent2">
        <div class="child1 child">{right: 30px}</div>
        <div class="child2 child">Child 2</div>
        <div class="child3 child">Child 3</div>
      </div>

      <div class="parent parent3">
        <div class="child1 child">{bottom: 30px}</div>
        <div class="child2 child">Child 2</div>
        <div class="child3 child">Child 3</div>
      </div>

      <div class="parent parent4">
        <div class="child1 child">{top: 30px}</div>
        <div class="child2 child">Child 2</div>
        <div class="child3 child">Child 3</div>
      </div>

      <div class="parent parent5">
        <div class="child1 child">{top: 30px, left: 30px}</div>
        <div class="child2 child">Child 2</div>
        <div class="child3 child">Child 3</div>
      </div>

      <div class="parent parent6">
        <div class="child1 child">{top: 30px, right: 30px}</div>
        <div class="child2 child">Child 2</div>
        <div class="child3 child">Child 3</div>
      </div>

      <div class="parent parent7">
        <div class="child1 child">{bottom: 30px, left: 30px}</div>
        <div class="child2 child">Child 2</div>
        <div class="child3 child">Child 3</div>
      </div>

      <div class="parent parent8">
        <div class="child1 child">{bottom: 30px, right: 30px}</div>
        <div class="child2 child">Child 2</div>
        <div class="child3 child">Child 3</div>
      </div>

      <div class="parent parent9">
        <div class="child1 child">{left: -30px}</div>
        <div class="child2 child">Child 2</div>
        <div class="child3 child">Child 3</div>
      </div>

      <div class="parent parent10">
        <div class="child1 child">{right: -30px}</div>
        <div class="child2 child">Child 2</div>
        <div class="child3 child">Child 3</div>
      </div>

      <div class="parent parent11">
        <div class="child1 child">{bottom: -30px}</div>
        <div class="child2 child">Child 2</div>
        <div class="child3 child">Child 3</div>
      </div>
    </div>
  </body>
</html>

Above snippet generate below screen.

Previous Next Home

Programming for beginners

Tuesday, 18 March 2025

Understanding position: relative in CSS: A Detailed Guide

No comments:

Post a Comment