POSITIONED ELEMENTS

In a world with so much information, people value timing and convenience.

On websites, this often means:

• product descriptions that appear over an image on hover
• a menu fixed in a corner of the screen
• sale badges placed directly on product cards

Before reading this note, it is better to watch this excellent video where everything is explained very clearly.

These patterns are useful for users and valuable for clients.

That is why a developer should know how to build them quickly.

1. Why Positioning Is Needed

By default, elements on a page are placed:

• from left to right
• from top to bottom

This is the normal page flow.

But sometimes normal layout is not enough.

Sometimes we want:

• one element on top of another
• an element in a corner
• a badge over a card
• a button that stays visible while scrolling

For that, we use the position property.

Main idea: the position property changes the type of positioning used by an element.

2. Syntax

position: static | relative | absolute | fixed | sticky;

Default value:

position: static;

3. Static Positioning

static is the original state of elements on a web page.

It is the normal document flow used by:

• the box model
• Flexbox items
• most regular page elements

Example:

.box {
  position: static;
}

What it means:

• the element stays where it naturally belongs
• it follows the normal page structure
• top, left, right, bottom do not position it in the usual way

Diagram:

Normal static flow

[Header]
[Section 1]
[Section 2]
[Footer]

Everything appears in order.

Important idea: most elements should stay in normal static flow. Other positioning methods are mostly used when normal layout is not enough.

4. What Is a Positioned Element

An element whose position value is not static is called a positioned element.

So these are positioned elements:

• relative
• absolute
• fixed
• sticky

But static is not considered positioned in practice.

Short rule:

non-static = positioned element

5. Which Values Can Lift an Element Above the Normal Page Flow

These values allow an element to be lifted and positioned manually:

• relative
• absolute
• fixed

These are the 3 correct answers.

Correct answers:

relative
absolute
fixed

Incorrect answer:

static

Why is static incorrect?

Because it keeps the element in normal flow and does not let us manually place it with coordinates.

6. Coordinate Properties

To place a positioned element, we usually use:

• top
• right
• bottom
• left

Example:

.box {
  position: absolute;
  top: 20px;
  left: 30px;
}

Meaning:

• move the element 20px from the top
• move it 30px from the left

Diagram:

Reference area

top: 20px
↓
+---------------------------+
|                           |
|      [box]                |
|      ← left: 30px         |
|                           |
+---------------------------+

Important: these coordinates depend on the type of positioning.

Very simple overview:

• relative - moves from the element's original place
• absolute - moves relative to the nearest positioned ancestor
• fixed - moves relative to the browser viewport

7. position: static

.box {
  position: static;
}

Meaning:

• normal flow
• default value
• no manual coordinate positioning

Diagram:

Static layout

[Box 1]
[Box 2]
[Box 3]

If we write:

.box2 {
  position: static;
  top: 20px;
  left: 20px;
}

The element still behaves like a normal element.

Diagram:

Still normal flow

[Box 1]
[Box 2]
[Box 3]

So for normal manual placement, static is not useful.

8. position: relative

.box {
  position: relative;
}

Main idea: the element stays in the layout, but it can be shifted visually.

Example:

.box {
  position: relative;
  top: 10px;
  left: 20px;
}

Meaning:

• the element still keeps its original space in the layout
• but it is drawn 10px lower and 20px to the right

Very important: the original space is still reserved.

Diagram before moving:

Normal flow

[Box 1]
[Box 2]
[Box 3]

Diagram after position: relative; top: 10px; left: 20px;

Original reserved places:

[Box 1]
[Box 2 original place]
[Box 3]

Visual result:

[Box 1]
   [Box 2 moved]
[Box 3]

Another diagram:

Reserved place:
+---------+
| Box 2   |
+---------+

Visual moved box:
      +---------+
      | Box 2   |
      +---------+

So:

• the box moves visually
• but the old place still exists in the layout

This is why relative is good when:

• you want small visual movement
• you want the element to keep its normal place
• you want to create a reference for an absolutely positioned child

Common use:

parent -> position: relative
child  -> position: absolute

9. position: absolute

.box {
  position: absolute;
}

Main idea: the element is removed from the normal flow and placed manually.

This means:

• it no longer keeps space in the document flow
• other elements behave as if it is not there
• it can be placed exactly where needed

Example:

.badge {
  position: absolute;
  top: 10px;
  right: 10px;
}

Diagram in normal flow:

[Card content]

With absolute badge:

+----------------------+
| Card           [NEW] |
|                      |
| Product image        |
| Product title        |
+----------------------+

Important idea: the badge is placed on top of the card content.

Another diagram:

Before:

[Image]
[Title]
[Price]

After adding absolute badge:

[Image      Badge]
[Title]
[Price]

Absolute elements are often used for:

• badges
• labels
• overlays
• tooltips
• decorative shapes
• text over images

Example:

.card {
  position: relative;
}

.badge {
  position: absolute;
  top: 8px;
  right: 8px;
}

Why does the parent often use position: relative?

Because the absolutely positioned child then uses that parent as its reference area.

Diagram:

Card = reference box

+--------------------------+
|                    [NEW] |
|                          |
|        Product           |
|                          |
+--------------------------+

10. position: fixed

.box {
  position: fixed;
}

Main idea: the element is fixed relative to the viewport.

Viewport = the visible browser window.

This means:

• the element stays in the same place on the screen
• it does not move away when the page scrolls

Example:

.chat-button {
  position: fixed;
  right: 20px;
  bottom: 20px;
}

Diagram:

Browser window

+----------------------------------+
|                                  |
|                                  |
|                            [Chat]|
+----------------------------------+

When the page scrolls, the button stays there.

Scrolling diagram:

Before scroll:
+----------------------------------+
| Content                          |
|                            [Chat]|
+----------------------------------+

After scroll:
+----------------------------------+
| More content                     |
|                            [Chat]|
+----------------------------------+

So fixed is often used for:

• chat buttons
• back-to-top buttons
• fixed menus
• floating action buttons
• cookie notices

11. position: sticky

.box {
  position: sticky;
}

Main idea: sticky is a mix of relative and fixed.

At first:

• the element behaves like a normal element

Then:

• when the scroll reaches a certain point, it sticks

Example:

.header {
  position: sticky;
  top: 0;
}

Meaning:

• the header scrolls normally at first
• then it sticks to the top of the screen

Diagram before sticking:

[Header]
[Content]
[More content]

During scroll:

+----------------------+
| [Sticky Header]      |
+----------------------+
| Content              |
| More content         |
+----------------------+

Common use:

• sticky headers
• sticky sidebars
• section titles

Important note: sticky is a positioned value, but it was not part of the 3-answer question above.

12. Visual Comparison of All Main Values

12.1 Static

[Box 1]
[Box 2]
[Box 3]

Normal flow only.

12.2 Relative

[Box 1]
[Box 2 original place]
[Box 3]

Visual:
      [Box 2 moved a little]

Keeps its space, but shifts visually.

12.3 Absolute

[Box 1]
[Box 3]

        [Box 2 on top somewhere]

Removed from flow and placed manually.

12.4 Fixed

Screen corner: [Button]

Stays in one place while scrolling.

12.5 Sticky

Normal at first -> then sticks during scroll

13. Practical Examples

13.1 Product Card Badge

Usually made with position: absolute.

Diagram:

+----------------------+
|                -20%  |
|   Product image      |
|   Product name       |
|   Price              |
+----------------------+

Possible CSS:

.card {
  position: relative;
}

.badge {
  position: absolute;
  top: 10px;
  right: 10px;
}

13.2 Fixed Menu or Chat Button

Usually made with position: fixed.

Diagram:

+----------------------------------+
| Page content                     |
|                                  |
|                            [Menu]|
+----------------------------------+

Possible CSS:

.menu-button {
  position: fixed;
  right: 20px;
  bottom: 20px;
}

13.3 Hover Text Over Image

Often made with:

• parent -> position: relative
• overlay text -> position: absolute

Diagram:

+----------------------+
|     Product image    |
|   [hover text here]  |
+----------------------+

Possible CSS:

.card {
  position: relative;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
}

14. Normal Flow vs Positioned Element

Normal flow:

[Header]
[Content]
[Footer]

With a positioned badge:

[Header]
[Content        Badge]
[Footer]

With a fixed button:

+--------------------------+
| Page content             |
|                    [Btn] |
+--------------------------+

This is why positioning is powerful: it lets us place elements in ways normal layout cannot.

15. Short Summary of Each Value

static

• default value
• normal page flow
• not manually positioned

relative

• stays in the flow
• can move visually
• keeps original space

absolute

• removed from normal flow
• manually placed
• often used inside a relative parent

fixed

• fixed to the viewport
• stays visible during scrolling

sticky

• acts normal at first
• then sticks during scroll

16. Mini Cheat Sheet

static   -> normal page flow
relative -> move relative to original place
absolute -> removed from flow, manual position
fixed    -> fixed to viewport
sticky   -> sticks while scrolling

17. Common Mistakes

Mistake 1: Thinking top, left, right, bottom will work normally on static.

Problem: they do not position a normal static element the way beginners expect.

Mistake 2: Using absolute without understanding that it leaves normal flow.

Problem: other elements may move as if that element is not there.

Mistake 3: Forgetting that relative still keeps its original space.

Problem: the moved element may look strange because the old space remains reserved.

Mistake 4: Using fixed for something that should scroll with the content.

Problem: the element stays on screen all the time.

Mistake 5: Forgetting that many absolute layouts need a positioned parent.

Common pattern:

.parent {
  position: relative;
}

.child {
  position: absolute;
}

18. Answer to the Question

Choose the values of position that allow an element to be lifted above the normal page flow and positioned manually.

Correct answers:

• relative
• absolute
• fixed

Incorrect:

• static

19. Final Summary

The position property is used when normal layout is not enough and an element must be placed more precisely.

Important things to remember:

• default value is static
• non-static elements are positioned elements
• top, left, right, and bottom help place positioned elements
• the 3 values that allow lifting and manual positioning are relative, absolute, and fixed

Super short memory line:

static = normal, relative = move from own place, absolute = free manual placement, fixed = screen position, sticky = sticks on scroll