- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Understanding CSS Positioning Methods
For positioning elements, CSS has the following positioning methods −
Relative Positioning in CSS
With relative positioning, the element is positioned relative to its normal position. For this, use position: relative.
Example
<!DOCTYPE html> <html> <head> <style> div.demo { position: relative; color: white; background-color: orange; border: 2px dashed blue; left: 50px; } </style> </head> <body> <h2>Demo Heading</h2> <p>This is demo text.</p> <p>This is demo text.</p> <div class="demo"> position: relative; </div> <p>This is another demo text.</p> </body> </html>
Output
Absolute Positioning in CSS
With absolute positioning, an element is positioned relative to the nearest positioned ancestor.
Example
<!DOCTYPE html> <html> <head> <style> div.demo1 { position: relative; color: white; background-color: orange; border: 2px dashed blue; width: 600px; height: 200px; } div.demo2 { position: absolute; color: white; background-color: orange; border: 2px dashed blue; top: 50px; right: 0; width: 300px; height: 100px; } </style> </head> <body> <h2>Demo Heading</h2> <p>This is demo text.</p> <p>This is demo text.</p> <p>This is demo text.</p> <p>This is demo text.</p> <div class="demo1">position: relative; <div class="demo2"> position: absolute; </div> </div> <p>This is another demo text.</p> <p>This is demo text.</p> <p>This is demo text.</p> </body> </html>
Output
Fixed Positioning in CSS
An element set with position: fixed; remains at the same place even when the page is scrolled.
Example
<!DOCTYPE html> <html> <head> <style> div.demo1 { position: relative; color: white; background-color: orange; border: 2px dashed blue; width: 600px; height: 200px; } div.demo2 { position: absolute; color: white; background-color: orange; border: 2px dashed blue; top: 50px; right: 0; width: 300px; height: 100px; } div.demo3 { position: fixed; bottom: 0; right: 20px; width: 500px; border: 3px solid orange; color: blue; } </style> </head> <body> <h2>Demo Heading</h2> <p>This is demo text.</p> <p>This is demo text.</p> <p>This is demo text.</p> <p>This is demo text.</p> <div class="demo1">position: relative; <div class="demo2"> position: absolute; </div> <div class="demo3"> position: fixed; </div> </div> <p>This is another demo text.</p> </body> </html>
Output
- Related Articles
- CSS Positioning Elements
- CSS positioning related properties
- Relative Positioning with CSS
- Absolute Positioning with CSS
- Fixed Positioning with CSS
- Fixed Positioning in CSS
- Absolute Positioning in CSS
- Static Positioning in CSS
- Relative Positioning in CSS
- Static Positioning Using CSS
- Absolute Positioning Using CSS
- Fixed Positioning Using CSS
- Understanding CSS Units
- Relative Positioning Working in CSS
- Understanding CSS Box Model

Advertisements