CSS Positioning: relative

Here's an English summary of the Relative Positioning lesson from your transcript:

https://www.bilibili.com/video/BV1qJrgYNEKG?t=2.2&p=82

---

📍 Relative Positioning (position: relative)

The Analogy: Fixed vs. Relative

Fixed Positioning	Relative Positioning
Like standing relative to the entire classroom --- no matter where you move, you're always positioned relative to the room	Like standing relative to your original spot --- you move 3 steps to the right from where you were originally standing

---

🎯 Core Concept

Relative positioning positions an element relative to its own original position in the document flow.

css

.relative-div {
    position: relative;
    left: 10px;   /* Move 10px to the right from original position */
    top: 20px;    /* Move 20px down from original position */
}

---

📐 Positive vs. Negative Values

Value Type	Effect
Positive (e.g., left: 10px;)	拉开距离 --- pushes the element away from that side
Negative (e.g., left: -10px;)	拉近距离 --- pulls the element toward that side

Example Breakdown

If you have left: 10px; top: 20px;:

• The element moves 10px to the right from its original left edge

• The element moves 20px down from its original top edge

• The original space remains reserved (the "ghost" position)

---

🔑 Key Characteristics of relative

Property	Behavior
Reference point	The element's own original position in the document flow
Document flow	❌ 不脱离文档流 --- does NOT leave the document flow
Original space	✅ 保留 --- the original position is still "reserved" (like a ghost space)
top/left/right/bottom	✅ 生效 --- all work and affect positioning

---

👻 The "Ghost Space" Concept

When you use relative positioning:

1. The element moves visually --- it shifts to a new position

2. The original space stays occupied --- other elements cannot move into that space

3. Other elements behave as if nothing moved --- they stay in their original positions

Visual Example:

text

Before:     After (relative):

┌─────────┐    ┌─────────┐
│  First   │    │  First   │ ← Moved right 10px, down 20px
└─────────┘    └─────────┘
┌─────────┐    ┌─────────┐
│ Second   │    │ Second   │ ← Stays in same place!
└─────────┘    └─────────┘

Original space of "First" is still reserved (empty but occupied)

---

🎨 Visual Diagram

text

        original position (dashed box)
        ┌─────────┐
        │  First   │ ← Reference point
        └─────────┘
              ↓ 20px (top)
              ↓
        ┌─────────┐
        │  First   │ ← New visual position
        └─────────┘
         ← 10px (left)

---

💡 Why relative Doesn't Leave the Document Flow

"If it left the document flow, how would it know where its original position was?"

Reason : The browser remembers the element's original position because it still occupies that space in the layout. This memory allows relative to calculate the offset from the original position.

---

📊 Comparison: Fixed vs. Relative

Aspect	fixed	relative
Reference point	Browser viewport	Own original position
Leaves document flow?	✅ Yes (space is freed)	❌ No (space is reserved)
Other elements affected?	✅ Yes --- they move into the freed space	❌ No --- they stay in place
Use case	Sticky headers, floating buttons	Slight adjustments, parent for absolute children

---

🔗 Important Note: Interaction with margin

When an element has relative positioning:

• Margin affects the element's original position in the document flow

• The top/left offsets are calculated after the margin is applied

• Example: If margin-top: 20px; and top: 10px;, the total offset from the original flow is 30px

---

📝 Key Takeaways

1. Reference : Always relative to itself (original position)

2. Space : Original space is still occupied (does NOT leave flow)

3. Values : Positive = away ; Negative = toward

4. Visual only : It only looks like it moved --- the layout doesn't change

5. Common use : As a parent container for absolute positioned children ("父相子绝")

---

This is one of the most important positioning types to master --- it's used constantly in real projects! 🚀