Scribd
Upload
6 views2 pages

CSS Positioning Explanation

CSS Positioning allows precise control over the placement of elements on a web page, with five main types: static, relative, absolute, fixed, and sticky. Each type has distinct behaviors regarding movement, reference points, and scrolling effects. A summary table outlines the characteristics and common uses for each positioning type.

Uploaded by

achauhan1787
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
6 views2 pages

CSS Positioning Explanation

CSS Positioning allows precise control over the placement of elements on a web page, with five main types: static, relative, absolute, fixed, and sticky. Each type has distinct behaviors regarding movement, reference points, and scrolling effects. A summary table outlines the characteristics and common uses for each positioning type.

Uploaded by

achauhan1787
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

CSS Positioning Explained for Beginners

What is CSS Positioning?

CSS Positioning helps you control the exact placement of elements (like text, images, buttons) on a web

page.

Types of Positioning in CSS:

1. static (Default):

- The default position. Elements appear one after another.

- Example: <p style="position: static;">This is static text.</p>

2. relative:

- Moves the element relative to its normal position.

- Example: <p style="position: relative; top: 20px; left: 30px;">Moved text.</p>

3. absolute:

- Places the element at an exact position inside its nearest positioned parent.

- Example:

<div style="position: relative;">

<p style="position: absolute; top: 10px; left: 50px;">Absolutely placed.</p>

</div>

4. fixed:

- The element stays fixed on the screen even when scrolling.

- Example: <p style="position: fixed; top: 0; right: 0;">Fixed top-right corner.</p>

5. sticky:

- Acts like relative at first, then sticks (like fixed) when scrolling.

- Example: <p style="position: sticky; top: 0;">Sticky header.</p>

Summary Table:
| Type | Moves Element | Based On | Stays on Scroll | Common Use |

|------------|----------------|------------------------|-----------------|-----------------------------|

| static | No | Normal flow | No | Default layout |

| relative | Yes | Its original place | No | Slight movement |

| absolute | Yes | Nearest positioned parent | No | Floating boxes, tooltips |

| fixed | Yes | Browser window | Yes | Menus, buttons |

| sticky | Yes | Normal flow (then screen) | Yes | Headers that stick on scroll|

You might also like