[ CSS position property](#)
* * *
`position: fixed` is a value in CSS positioning properties used for **fixed positioning**. Elements with fixed positioning are **removed from the document flow** and positioned relative to the **browser viewport**, **not moving with page scroll**.
This is the core technology for implementing fixed navigation bars, back-to-top buttons, sidebar ads, and similar features.
**Word meaning**: `fixed` comes from the Latin word `fixare`, meaning "to fix, to install", indicating that once an element's position is set, it will not change.
* * *
## Basic Syntax
`position: fixed` needs to be used with `top`, `right`, `bottom`, and `left` properties to specify the position relative to the viewport.
/* Syntax */ position: fixed;/* Common combination: fixed at top */.navbar { position: fixed; top: 0; left: 0; width: 100%; height: 60px;}/* Fixed at bottom right */.back-to-top { position: fixed; bottom: 20px; right: 20px;}
## Core Characteristics
### Characteristic 1: Positioned relative to viewport
Fixed positioned elements are **not affected by parent elements** and are always positioned relative to the visible area of the browser window.
### Characteristic 2: Removed from document flow
Like `absolute`, `fixed` elements **do not occupy document space**, and surrounding elements will arrange normally, **ignoring** the fixed positioned element.
### Characteristic 3: Fixed and does not move with scroll
This is the **key difference** between `fixed` and `absolute`: no matter how the page scrolls, the fixed positioned element always stays at the specified position.
### Characteristic 4: Activates z-index
Fixed positioning activates the `z-index` property, allowing control over the stacking order of elements in the viewport.
* * *
## Examples
Let's understand the characteristics of `position: fixed` through examples.
### Example 1: Fixed Top Navigation Bar
This is the most common application scenario for `fixed`: fixed navigation bar.
## Example
body {
margin: 0;
font-family: Arial, sans-serif;
}
/* Fixed top navigation bar */
.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
background-color: #2c3e50;
color: white;
display: flex;
align-items: center;
padding: 0 20px;
box-sizing: border-box;
z-index: 1000;
}
/* Main content area */
.content {
padding-top: 80px; /* Avoid being covered by navigation bar */
padding: 80px 20px 20px;
max-width: 800px;
margin: 0 auto;
}
.spacer {
height: 1500px; /* Create sufficient scroll area */
}
.text-block {
margin-bottom: 20px;
padding: 20px;
background-color: #f5f5f5;
border-radius: 4px;
}
Fixed Navigation Bar - Scroll down to see the effect
Fixed Positioning Example
This is a fixed navigation bar implemented using position: fixed.
No matter how you scroll the page, the navigation bar will stay at the top.
Content Area 1
This is the first paragraph of content, used to fill the page to create a scrollbar.
Content Area 2
This is the second paragraph of content.
Content Area 3
This is the third paragraph of content.
Content Area 4
This is the fourth paragraph of content.
### Example 2: Back-to-Top Button Fixed at Bottom Right
Fixed positioning is also commonly used to create "back to top" buttons:
## Example
body {
margin: 0;
font-family: Arial, sans-serif;
}
.content {
padding: 20px;
max-width: 800px;
margin: 0 auto;
}
/* Page long enough to create scrollbar */
.tall-content {
height: 2000px;
}
/* Button fixed at bottom right */
.back-to-top {
position: fixed;
bottom: 30px;
right: 30px;
width: 50px;
height: 50px;
background-color: #e74c3c;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 24px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
transition: transform 0.2s;
}
.back-to-top:hover {
transform: scale(1.1);
background-color: #c0392b;
}
This is an overlay modal created using fixed positioning.
The overlay always covers the entire viewport and does not scroll with the page.
* * *
## Notes
> **Mobile compatibility issues:** In iOS Safari and some mobile browsers, `position: fixed` may have compatibility issues. Elements may move when input fields gain focus. Solutions include: using `-webkit-position: fixed` or setting `transform: translateZ(0)` to enable hardware acceleration.
### z-index Level
The `z-index` of fixed positioned elements is calculated relative to the **viewport**, not the parent element.
### Difference from Absolute Positioning
| Characteristic | position: absolute | position: fixed |
| --- | --- | --- |
| Positioning reference | Nearest positioned ancestor element | Browser viewport |
| Page scroll | Moves with page scroll | **Fixed, does not move** |
| Printing | Displays normally | May not display or behave abnormally |
### Preventing Fixed Positioned Elements from Being Printed
@media print { .fixed-element { position: static; /* Cancel fixed positioning when printing */ }}
* * *
## Common Application Scenarios
### Scenario 1: Fixed Top Navigation
.nav-header { position: fixed; top: 0; width: 100%; height: 50px; z-index: 100;}
### Scenario 2: Fixed Back Button
.floating-btn { position: fixed; bottom: 20px; right: 20px;}
### Scenario 3: Chat Window
.chat-widget { position: fixed; bottom: 20px; right: 20px; width: 300px; height: 400px;}
* * *
## Summary
`position: fixed` is the core technology for implementing fixed UI elements:
* Positioned relative to the **browser viewport**, not affected by parent elements
* **Fixed and does not move with page scroll**
* Element is **removed from document flow**, does not occupy space
* Activates `z-index`, can control stacking order
* Commonly used for fixed navigation bars, back-to-top buttons, fixed sidebars, overlay modals
* Mobile compatibility issues need attention
* * *
[
YouTip