
- CSS Tutorial
- CSS - Home
- CSS - Introduction
- CSS - Syntax
- CSS - Inclusion
- CSS - Measurement Units
- CSS - Colors
- CSS - Backgrounds
- CSS - Fonts
- CSS - Text
- CSS - Images
- CSS - Links
- CSS - Tables
- CSS - Borders
- CSS - Margins
- CSS - Lists
- CSS - Padding
- CSS - Cursors
- CSS - Outlines
- CSS - Dimension
- CSS - Scrollbars
- CSS Advanced
- CSS - Visibility
- CSS - Positioning
- CSS - Layers
- CSS - Pseudo Classes
- CSS - Pseudo Elements
- CSS - @ Rules
- CSS - Text Effects
- CSS - Media Types
- CSS - Paged Media
- CSS - Aural Media
- CSS - Printing
- CSS - Layouts
- CSS - Validations
- CSS3 Tutorial
- CSS3 - Tutorial
- CSS3 - Rounded Corner
- CSS3 - Border Images
- CSS3 - Multi Background
- CSS3 - Color
- CSS3 - Gradients
- CSS3 - Shadow
- CSS3 - Text
- CSS3 - Web font
- CSS3 - 2d transform
- CSS3 - 3d transform
- CSS3 - Animation
- CSS3 - Multi columns
- CSS3 - User Interface
- CSS3 - Box Sizing
- CSS Responsive
- CSS - Responsive Web Design
- CSS References
- CSS - Questions and Answers
- CSS - Quick Guide
- CSS - References
- CSS - Color References
- CSS - Web browser References
- CSS - Web safe fonts
- CSS - Units
- CSS - Animation
- CSS Resources
- CSS - Useful Resources
- CSS - Discussion
Absolute Positioning Using CSS
We can define positioning of an element in CSS as absolute which renders the element relative to the first positioned (except static) parent. Elements with positioning method as absolute are positioned by CSS Positioning properties (left, right, top and bottom).
Example
Let’s see an example for CSS Absolute Positioning Method −
<!DOCTYPE html> <html> <head> <style> p { margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } div:first-child { background-color: orange; text-align: center; } div:last-child { width: 250px; height: 100px; margin: auto; background-color: turquoise; position: absolute; z-index: -1; top:0; left: 0; right: 0; bottom: 0; } </style> </head> <body> <div>Demo text</div> <p>ICC is International Cricket Council is the governing body of Cricket founded in 1909........</p> <div> </div> </body> </html>
Output
Following is the output for above code −
Example
Let’s see another example for positioning methods −
<!DOCTYPE html> <html> <head> <style> div { border: 2px double #a43356; margin: 5px; padding: 5px; } #d1 { position: relative; height: 10em; } #d2 { position: absolute; width: 20%; bottom: 10px; /*relative to parent d1*/ } #d3 { position: fixed; width: 30%; top:10em; /*relative to viewport*/ } </style> </head> <body> <div id="d1">MySQL is the most popular Open Source Relational SQL Database Management System. MySQL is one of the best RDBMS being used for developing various web-based software applications. <mark>relative</mark> <div id="d2"><mark>absolute</mark></div> <div id="d3"><mark>fixed</mark></div> </div> </body> </html>
Output
Following is the output for above code −
- Related Articles
- Absolute Positioning with CSS
- Absolute Positioning in CSS
- Static Positioning Using CSS
- Fixed Positioning Using CSS
- CSS Positioning Elements
- CSS positioning related properties
- Relative Positioning with CSS
- Fixed Positioning with CSS
- Static Positioning in CSS
- Relative Positioning in CSS
- Fixed Positioning in CSS
- Understanding CSS Positioning Methods
- Relative Positioning Working in CSS
- What is the usage of scrollable cursor for absolute positioning?
- Why cannot I use iframe absolute positioning to set height/width

Advertisements