Position Fixed vs Sticky

🔒 Position: Fixed - Explicație Detaliată

Position: fixed poziționează elementul relativ la viewport (fereastra browser-ului). Elementul rămâne în aceeași poziție chiar și când utilizatorul face scroll. Este scos complet din fluxul documentului.

🎯 Caracteristici principale:

✅ Rămâne fix pe ecran indiferent de scroll
✅ Se poziționează relativ la viewport, nu la părinte
✅ Este scos din fluxul normal (nu ocupă spațiu)
✅ Perfect pentru: navigări, butoane de acțiune, notificări
⚠️ Poate acoperi conținut - necesită gestionare atentă

📱 Exemplul 1: Navigare Fixed

Bara de navigare apare când dai scroll în jos (scroll pentru a vedea!):

Status: Ascunsă

.navigation {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000; /* Deasupra altor elemente */
    /* Width: 100% implicit din left: 0 și right: 0 */
}

🎛️ Exemplul 2: Sidebar Fixed

Sidebar care rămâne vizibil în timp ce conținutul poate fi scrollat:

Conținut Principal

Acest conținut poate fi mult mai lung și va putea fi scrollat, în timp ce sidebar-ul rămâne fix.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

.sidebar {
    position: fixed;
    width: 200px;
    height: 100vh; /* Înălțime completă */
    left: 0;
    top: 0;
    overflow-y: auto; /* Scroll dacă conținutul e prea lung */
}

➕ Exemplul 3: Butoane de Acțiune Fixe (FAB)

Butoane flotante care rămân în colțul ecranului:

Uită-te în colțul din dreapta-jos al ecranului pentru butoanele de acțiune! →

Acestea rămân vizibile oricât de mult dai scroll pe pagină.

.fab-button {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    z-index: 100;
}

🔲 Exemplul 4: Modal/Overlay Fixed

Modal care acoperă tot viewport-ul:

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.8);
    z-index: 9999;
}

.modal-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

🔔 Exemplul 5: Notificări Fixed

Notificări care apar în colțul ecranului:

.notification {
    position: fixed;
    top: 20px;
    right: 20px;
    min-width: 300px;
    z-index: 1500;
    animation: slideIn 0.3s ease;
}

🍯 Position: Sticky - Explicație Detaliată

Position: sticky este un hibrid între relative și fixed. Elementul se comportă ca relative până când ajunge la un prag de scroll specificat, apoi devine fixed în acea poziție.

🎯 Caracteristici principale:

✅ Comută între relative și fixed automat
✅ Rămâne în container-ul părinte (nu iese din el)
✅ Își păstrează spațiul în flux când e relative
✅ Perfect pentru: headere de secțiuni, navigări, tabele
⚠️ Necesită specificarea top/bottom/left/right pentru a funcționa
⚠️ Funcționează doar în container cu overflow vizibil sau scroll

📑 Exemplul 6: Sticky Headers în Liste

Headere care se lipesc la top când dai scroll (scroll în container!):

iPhone 15 Pro Max

Samsung Galaxy S24 Ultra

Google Pixel 8 Pro

MacBook Pro M3

Dell XPS 15

ThinkPad X1 Carbon

AirPods Pro 2

Sony WH-1000XM5

Bose QuietComfort Ultra

Apple Watch Ultra 2

Samsung Galaxy Watch 6

Garmin Fenix 7

.sticky-header {
    position: sticky;
    top: 0; /* Se lipește când ajunge la top */
    z-index: 10; /* Deasupra conținutului */
    /* Rămâne în container, nu iese din el */
}

📊 Exemplul 7: Table Headers Sticky

Header de tabel care rămâne vizibil la scroll:

Produs	Categorie	Preț	Stoc
iPhone 15 Pro	Telefoane	5999 RON	În stoc
MacBook Air M2	Laptopuri	6499 RON	În stoc
iPad Pro 12.9	Tablete	5799 RON	Limitat
AirPods Pro 2	Căști	1299 RON	În stoc
Apple Watch Ultra	Smartwatch	4299 RON	În stoc
Samsung S24 Ultra	Telefoane	6299 RON	În stoc
Dell XPS 15	Laptopuri	8999 RON	Comandă
Sony WH-1000XM5	Căști	1799 RON	În stoc
Kindle Paperwhite	E-Reader	799 RON	În stoc
Nintendo Switch	Gaming	1599 RON	Limitat

thead th {
    position: sticky;
    top: 0;
    background: #667eea; /* Fundal solid obligatoriu */
    z-index: 10;
}

🧭 Exemplul 8: Sidebar Navigation Sticky

Navigare laterală care urmărește scroll-ul (scroll în container!):

Introducere

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Documentație

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Exemple

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

Totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Configurare

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.

Sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

Deploy

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.

Sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

.sidebar-nav {
    position: sticky;
    top: 20px; /* Distanță de la top când se lipește */
    height: fit-content; /* Important pentru sticky */
}

🃏 Exemplul 9: Stacked Sticky Cards

Carduri care se suprapun la scroll (efect de stivă):

📝 Card 1 - Top: 20px

Primul card se lipește la 20px de top. Când dai scroll, următoarele carduri se vor suprapune.

📊 Card 2 - Top: 40px

Al doilea card se lipește la 40px, creând un efect de suprapunere cu primul card.

🎯 Card 3 - Top: 60px

Al treilea card se lipește la 60px. Observă cum se creează o stivă vizuală!

🚀 Card 4 - Top: 80px

Ultimul card se lipește la 80px. Efectul de stivă este complet acum.

Conținut suplimentar pentru scroll

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

/* Carduri cu offset incremental pentru efect de stivă */
.card:nth-child(1) { position: sticky; top: 20px; z-index: 4; }
.card:nth-child(2) { position: sticky; top: 40px; z-index: 3; }
.card:nth-child(3) { position: sticky; top: 60px; z-index: 2; }
.card:nth-child(4) { position: sticky; top: 80px; z-index: 1; }

📈 Exemplul 10: Progress Indicator Sticky

Indicator de progres care urmărește citirea (scroll în container!):

Progres citire: 0%

Articol lung pentru demonstrație

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum.

Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

Totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt.

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum.

Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

⚖️ Comparație: Fixed vs Sticky

Caracteristică	Position: Fixed	Position: Sticky
Comportament	📌 Mereu fix pe ecran	🔄 Comută între relative și fixed
Punct de referință	🖼️ Viewport (fereastra browser)	📦 Container părinte
Flux document	❌ Scos complet din flux	✅ Rămâne în flux când e relative
Scroll behavior	🔒 Ignoră scroll-ul complet	📜 Reacționează la scroll
Container limits	❌ Poate ieși din părinte	✅ Rămâne în părinte
Suport browser	✅ Excelent (toate browserele)	⚠️ Bun (verifică versiuni vechi)
Use cases	• Navigări principale • Butoane flotante (FAB) • Modals & overlays • Notificări • Chat widgets	• Headere de secțiuni • Table headers • Sidebar navigation • Progress indicators • Carduri stivuite
Performance	⚡ Foarte bun	⚡ Bun (recalculare la scroll)

⚠️ Probleme Comune și Soluții

🔧 Pentru Fixed:

1. Conținut acoperit de elemente fixed:
Soluție: Adaugă padding pe body sau container pentru a compensa înălțimea elementului fixed.

/* Compensează pentru nav fixed de 60px */
body { padding-top: 60px; }

2. Fixed pe mobile nu funcționează cum te aștepți:
Soluție: Testează pe dispozitive reale și folosește viewport units.

/* Mai bun pentru mobile */
.fixed-element {
    position: fixed;
    width: 100vw; /* Full viewport width */
    bottom: env(safe-area-inset-bottom); /* Pentru iPhone */
}

3. Z-index conflicts:
Soluție: Creează o scară z-index consistentă în aplicație.

🔧 Pentru Sticky:

1. Sticky nu funcționează:
Verifică: ✓ Ai specificat top/bottom/left/right? ✓ Părintele are overflow: hidden? ✓ Elementul are height definit?

/* Sticky corect */
.sticky-element {
    position: sticky;
    top: 0; /* OBLIGATORIU! */
    z-index: 10;
}

2. Sticky iese din container:
Sticky respectă limitele părintelui. Asigură-te că părintele are înălțime suficientă.

3. Nu funcționează în tabele:
Soluție: Aplică sticky pe th/td, nu pe thead/tr.

/* Pentru table headers */
thead th { position: sticky; top: 0; }
/* Nu pe thead sau tr! */

✨ Best Practices

📌 Pentru Fixed:

✅ Folosește transform pentru animații (mai performant)
✅ Testează pe dispozitive mobile (comportament diferit)
✅ Oferă întotdeauna o cale de a închide/ascunde elementele fixed
✅ Consideră accesibilitatea (screen readers, keyboard navigation)
✅ Limitează numărul de elemente fixed (performance)

🍯 Pentru Sticky:

✅ Folosește background solid pentru a evita transparența
✅ Testează în toate browserele (suport variabil)
✅ Verifică că părintele nu are overflow: hidden
✅ Folosește fallback pentru browsere vechi
✅ Optimizează pentru performance (will-change: transform)

🔒 Position: Fixed - Explicație Detaliată

🎯 Caracteristici principale:

📱 Exemplul 1: Navigare Fixed

🎛️ Exemplul 2: Sidebar Fixed

Sidebar Fixed

Conținut Principal

➕ Exemplul 3: Butoane de Acțiune Fixe (FAB)

🔲 Exemplul 4: Modal/Overlay Fixed

🔔 Exemplul 5: Notificări Fixed

🍯 Position: Sticky - Explicație Detaliată

🎯 Caracteristici principale:

📑 Exemplul 6: Sticky Headers în Liste

📊 Exemplul 7: Table Headers Sticky

🧭 Exemplul 8: Sidebar Navigation Sticky

Introducere

Documentație

Exemple

Configurare

Deploy

🃏 Exemplul 9: Stacked Sticky Cards

📈 Exemplul 10: Progress Indicator Sticky

Articol lung pentru demonstrație

⚖️ Comparație: Fixed vs Sticky

⚠️ Probleme Comune și Soluții

🔧 Pentru Fixed:

🔧 Pentru Sticky:

✨ Best Practices

📌 Pentru Fixed:

🍯 Pentru Sticky:

🎉 Sunt un Modal Fixed!