CSS Positioning: fixed

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;.

💡 Key Takeaways

Positioning is for layout --- not just styling content
relative doesn't leave the flow --- it keeps its original space
absolute and fixed leave the flow --- they become "floating" elements
"父相子绝" (Parent Relative, Child Absolute) is the go-to pattern
sticky is great for sidebars --- it's smooth and respects footer boundaries

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