
- 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
Fixed Positioning Using CSS
We can define positioning of an element in CSS as fixed which renders the element relative to the user’s viewport. Elements with positioning method as fixed do not move even on scroll and are positioned by CSS Positioning properties (left, right, top and bottom).
Example
Let’s see an example for CSS Fixed 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>What is ASP.NET?</div> <p>ASP.NET is a web application framework developed and marketed by Microsoft to allow programmers to build dynamic web sites............</p> <div> </div> </body> </html>
Output
Following is the output for the above code −
Example
Let’s see another example of the positioning method −
<!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">Android is an open source and Linux-based operating system for mobile devices such as smartphones and tablet computers. Android was developed by the Open Handset Alliance, led by Google, and other companies. <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 the above code −
- Related Articles
- Fixed Positioning with CSS
- Fixed Positioning in CSS
- Static Positioning Using CSS
- Absolute Positioning Using CSS
- CSS Positioning Elements
- CSS positioning related properties
- Relative Positioning with CSS
- Absolute Positioning with CSS
- Absolute Positioning in CSS
- Static Positioning in CSS
- Relative Positioning in CSS
- Understanding CSS Positioning Methods
- Relative Positioning Working in CSS
- CSS position: fixed;
- Detect when an Element Gets Fixed in CSS position:sticky using Intersection Observer

Advertisements