CSS Positioning: fixed

原创于 2026-07-01 19:51:31 发布 · 210 阅读

本内容遵循CC 4.0 BY-SA版权协议

Here's an English summary of the CSS positioning lesson from video transcript

https://www.bilibili.com/video/BV1qJrgYNEKG?t=1.0&p=81

📐 CSS Positioning Overview

What We've Learned So Far

Before positioning, we could only style content (colors, sizes, fonts, borders, backgrounds). Now we're learning positioning to control layout — where elements actually sit on the page.

🎯 The Five Positioning Properties

Property	Purpose
`position`	Specifies the positioning type
`top`	Distance from the top
`bottom`	Distance from the bottom
`left`	Distance from the left
`right`	Distance from the right

Key rule: You can only use top/right/bottom/left after you've set a position value (other than static).

📄 What is "Document Flow"?

Document Flow: The browser's default way of arranging elements — from top to bottom, and left to right within each row.

Key Concept: Some positioning types 脱离文档流 (remove elements from the document flow), meaning:

The element no longer occupies space in the layout
Other elements can move into its original position

🧩 The Positioning Values

1. `static` (Default)

What it does: No positioning; element stays in normal document flow
top/right/bottom/left: ❌ 无效 (have no effect)
Usage: Rarely used explicitly (it's the default)

2. `fixed`

What it does: Positions the element relative to the browser viewport
Behavior: Stays in the same place even when scrolling
Document Flow: ✅ 脱离文档流 (removed from flow)
Example:

css

.fixed-div {
    position: fixed;
    right: 10px;  /* 10px from the right edge of viewport */
    top: 20px;    /* 20px from the top edge of viewport */
}

Key point about right values:

right: 0; → element touches the right edge of viewport
right: 10px; → element is 10px away from the right edge (拉开距离)
right: -10px; → element overlaps the right edge by 10px (拉近距离)

3. `relative`

What it does: Positions element relative to its normal position in the flow
Document Flow: ❌ 不脱离文档流 (stays in flow — original space is preserved)
Usage: Commonly used as a parent container for absolute children ("父相子绝")

4. `absolute`

What it does: Positions element relative to its nearest positioned ancestor (non-static)
If no positioned ancestor exists: Positions relative to <html>
Document Flow: ✅ 脱离文档流 (removed from flow)
Classic pattern: Parent relative + Child absolute

5. `sticky`

What it does: Switches between relative and fixed based on scroll position
Document Flow: ❌ 不脱离文档流 (stays in flow)
Requires: A threshold value like top: 30px;

📊 Quick Reference Table

Position Value	Reference Point	Leaves Document Flow?	`top/left` Work?
`static`	None (default)	❌ No	❌ No
`relative`	Its own normal position	❌ No	✅ Yes
`absolute`	Nearest positioned ancestor	✅ Yes	✅ Yes
`fixed`	Browser viewport	✅ Yes	✅ Yes
`sticky`	Viewport (at threshold)	❌ No	✅ Yes

🎨 The "Parent Relative, Child Absolute" Pattern

This is the most common positioning pattern:

html

<style>
  .parent {
    position: relative;  /* Anchor for child */
  }
  .child {
    position: absolute;
    top: 0;
    right: 0;
  }
</style>

<div class="parent">
  <div class="child">I'm in the top-right corner!</div>
</div>

Why it works: The child positions itself relative to the parent because the parent has position: relative;.