Scribd
Upload
37 views4 pages

A Guide To CSS Positions

The document provides an overview of CSS positioning, detailing five types: static, relative, absolute, fixed, and sticky. Each type is explained with code examples demonstrating how to implement them in web development. Additionally, it covers the z-index property for controlling the stacking order of overlapping elements.

Uploaded by

Krisha
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
37 views4 pages

A Guide To CSS Positions

The document provides an overview of CSS positioning, detailing five types: static, relative, absolute, fixed, and sticky. Each type is explained with code examples demonstrating how to implement them in web development. Additionally, it covers the z-index property for controlling the stacking order of overlapping elements.

Uploaded by

Krisha
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

TheDevSpace | Full-Stack Web Development Course

A Guide to CSS
Positions

static (default)
Elements are positioned according to the
normal document flow (no positioning applied).

1 .element {
2 position: static;
3 }

CodePen Demo

relative
Moves the element relative to its original
position without affecting other elements.

[Link]
TheDevSpace | Full-Stack Web Development Course

1 .element {
2 position: relative;
3 top: 10px; "# moves down "$
4 left: 20px; "# moves right "$
5 }

CodePen Demo

absolute
Positions the element relative to the nearest
positioned ancestor (not static ), or the
<html> element if none exists.

1 .parent {
2 position: relative;
3 }
4 .child {
5 position: absolute;
6 top: 0;
7 right: 0;
8 }

CodePen Demo

[Link]
TheDevSpace | Full-Stack Web Development Course

fixed
Sticks the element to a specific spot on the
screen, even when scrolling.

1 .element {
2 position: fixed;
3 bottom: 0;
4 right: 0;
5 }

CodePen Demo

sticky
The element scrolls with the page until it
reaches a threshold, then “sticks” in place.

1 .element {
2 position: sticky;
3 top: 0;
4 }

[Link]
TheDevSpace | Full-Stack Web Development Course

CodePen Demo

z-index
Controls the stacking order of overlapping
positioned elements.

1 .element {
2 position: relative;
3 z-index: 10;
4 }

CodePen Demo

[Link]

You might also like