Scribd
Upload
51 views7 pages

CSS Positioning Explained

The document discusses the different CSS position properties including static, relative, absolute, fixed, and sticky. Static is the default value where elements are positioned according to normal document flow. Relative shifts the element but does not affect other elements' layout. Absolute positions elements relative to the nearest positioned ancestor. Fixed positions elements relative to the viewport. Sticky positions elements relative until a scroll position is reached then it becomes fixed.

Uploaded by

ablotoi46
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
51 views7 pages

CSS Positioning Explained

The document discusses the different CSS position properties including static, relative, absolute, fixed, and sticky. Static is the default value where elements are positioned according to normal document flow. Relative shifts the element but does not affect other elements' layout. Absolute positions elements relative to the nearest positioned ancestor. Fixed positions elements relative to the viewport. Sticky positions elements relative until a scroll position is reached then it becomes fixed.

Uploaded by

ablotoi46
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/ 7

@NOVADESIGNS

CSS POSITION IS EASY


CSS (Cascading Style Sheets) position is a property
used to specify how an element is positioned in a
document.

NOVADESIGNS
STATIC
This is the default value. Elements are
positioned according to the normal document
flow.

DIV

Button
Heading 1 span paragraph

Click Me Heading 2 image


Heading 3
Heading 4
Heading 5
Heading 6
RELATIVE
The element is positioned relative to its
normal position. Shifting it does not affect
the layout of other elements.

position: relative;
right: -15px

right: 100% right: 0%


ABSOLUTE
The element is positioned relative to its nearest positioned ancestor (an
ancestor with a position other than static). If there is no such ancestor, it
uses the document body, and moves along with page scrolling.

position: relative;
bottom: 100%;
nearest ancestor
position: absolute;

position: absolute; position: absolute;


bottom: 0; bottom: 0;
right: 0; right: 0;
bottom: 0;

right: 100% right: 0%;


FIXED
The element is positioned relative to the viewport, which means it stays in
place even when the page is scrolled.

STAYS AT THE SAME


PLACE ON SCREEN
(EVEN WHEN SCROLLED)
STICKY
The element is treated as relative until it reaches a defined scroll
position, then it is treated as fixed.

WHEN IT REACH HERE,


IT WILL BECOME FIXED

RELATIVE
NEED MORE?
@NOVADESIGNS

You can practice your CSS POSITION


skills in our YT Channel: NOVA DESIGNS

If you need a custom website, you can message us on:


novadesigns.creative@gmail.com

You might also like