Scribd
Upload
9 views

CSS Positions (Part 2)

The document discusses different CSS positioning types: relative positions elements relative to its normal position, absolute positions elements relative to the nearest positioned ancestor, fixed positions elements relative to the viewport, and sticky positions elements relative to the nearest scrolling ancestor and fixes it after a certain scroll point.

Uploaded by

Munna Kumar Jha
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
9 views

CSS Positions (Part 2)

The document discusses different CSS positioning types: relative positions elements relative to its normal position, absolute positions elements relative to the nearest positioned ancestor, fixed positions elements relative to the viewport, and sticky positions elements relative to the nearest scrolling ancestor and fixes it after a certain scroll point.

Uploaded by

Munna Kumar Jha
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 15

CSS Positions

(Part 2)

PW SKILLS
Topics Covered
● Relative Positioning
● Absolute Positioning
● Sticky Positioning
● Fixed Positioning

PW SKILLS
Relative Positioning
With relative positioning, an element can be moved top, down, left or right from its normal position.

PW SKILLS
Properties of position Relative
● It will not break the normal document flow to position the element on the page.
● The properties like top, left, right, bottom and z-index will have an effect on the element.
● The element will leave the space at its original position.

PW SKILLS
Example
HTML Output

.box2 {
position: relative;
top: 50px;
left: 50px;
background-color: green;
}

PW SKILLS
Absolute Positioning
With absolute positioning, an element is positioned relative to its nearest positioned ancestor.

Note: Positioned Ancestor means an element which will be using any position property like relative,
absolute, fixed or sticky.

PW SKILLS
Properties of Position Absolute
● It will break the normal document flow to position the element on the page.
● The properties like top, left, right, bottom and z-index will have an effect on the element.
● The element will not leave any space at its original position.

PW SKILLS
Example
HTML Output

.container {
border: 2px solid black;
height: 500px;
width: 500px;
position: relative;
}

.box2 {
position: absolute;
top: 50px;
left: 50px;
background-color: green;
}

PW SKILLS
Fixed Positioning
Fixed positioning is similar to absolute positioning, but the element is positioned relative to the
viewport instead of an ancestor element.

PW SKILLS
Properties of Position Fixed
● It will break the normal document flow to position the element on the page.
● The properties like top, left, right, bottom and z-index will have an effect on the element.
● The element will not leave any space in its original position.

PW SKILLS
Example
CSS Output

.container {
border: 2px solid black;
height: 150px;
width: 500px;
position: relative;
overflow: scroll;
}

.box2 {
position: fixed;
top: 100px;
left: 100px;
background-color: green;
}

PW SKILLS
Sticky Positioning
An element with sticky positioning is positioned relative to its nearest ancestor with a scrolling
mechanism.

It behaves,
● relatively positioned element until the user scrolls to a certain point,
● and then it becomes fixed to the viewport.

PW SKILLS
Properties of Position Sticky
● It will not break the normal flow of the document to position the element on the page.
● The properties like top, left, right, bottom and z-index will have an effect on the element.

PW SKILLS
Example
CSS Output

.container {
border: 2px solid black;
height: 150px;
width: 500px;
position: relative;
overflow: scroll;
}

.box2 {
background-color: green;
position: sticky;
top: 10px;
left: 50px;
}

PW SKILLS
THANK YOU

PW SKILLS

You might also like