Poziționare CSS Ghid Rapid — Complete Guide

In this tutorial, you'll learn about Poziționare CSS Ghid Rapid. We cover key concepts, practical examples, and best practices.

Vei învăța cum să folosești proprietatea position în CSS pentru a controla exact unde și cum se afișează elementele în pagină, de la fluxul normal până la poziționarea fixă și lipicioasă.

Problema

Elementele din fluxul normal al documentului se așază unul după altul, fără posibilitatea de suprapunere sau de poziționare precisă. Pentru layere, meniuri sticky, tooltip-uri sau elemente floating, ai nevoie de o poziționare specializată care scoate elementele din flux.

Rezolvare rapidă

Pasul 1: position: relative pentru ajustări fine

/* Greșit — ajustare cu margin care mișcă și elementele vecine */
.button {
    margin-top: -5px;
}

/* Corect — păstrează spațiul original, mută doar vizual */
.button {
    position: relative;
    top: -5px;
    left: 10px;
}

Rezultat: Elementul se mută vizual fără a afecta poziția elementelor din jur.

Pasul 2: position: absolute pentru poziționare precisă

.container {
    position: relative; /* punct de referință */
}

/* Greșit — elementul se raportează la viewport */
.badge {
    position: absolute;
    top: 0;
    right: 0;
}

/* Corect — containerul este referința */
.badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: red;
    color: white;
    padding: 2px 6px;
    border-radius: 50%;
    font-size: 12px;
}

Rezultat: Badge-ul se plasează în colțul din dreapta sus al containerului, indiferent de poziția acestuia în pagină.

Pasul 3: position: fixed pentru elemente care nu se derulează

/* Greșit — meniul dispare la derulare */
nav {
    background: #fff;
}

/* Corect — meniul rămâne fix în partea de sus */
nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Compensează spațiul consumat de meniul fix */
body {
    padding-top: 60px;
}

Rezultat: Navigația rămâne vizibilă în timpul derulării.

Pasul 4: position: sticky pentru elemente lipicioase

/* Greșit — JavaScript pentru comportament sticky */
/* Corect — CSS nativ */
.sidebar {
    position: sticky;
    top: 80px; /* se lipește după 80px de scroll */
    height: fit-content;
}

.section-header {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 1;
}

Rezultat: Sidebar-ul și header-ele de secțiune rămân vizibile în timpul derulării, dar numai în limitele containerului părinte.

Pasul 5: Înțelege containerele de poziționare

/* Greșit — fără poziționare, absolut se raportează la viewport */
.tooltip {
    position: absolute;
    bottom: 100%;
}

/* Corect — creează un context de poziționare */
.card {
    position: relative;
}

.tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
}

Rezultat: Tooltip-ul se poziționează relativ la card, nu la viewport.

Prevenire

• Folosește position: relative pe container când folosești absolute în interior
• position: fixed se raportează la viewport, nu la părinte
• position: sticky funcționează doar când containerul părinte are overflow vizibil
• Adaugă z-index pentru controlul suprapunerii

Greșeli comune

1. Folosirea absolute fără un părinte relative — Elementul se raportează la viewport sau la cel mai apropiat părinte poziționat.
2. Confundarea fixed cu sticky — fixed este relativ la viewport; sticky alternează între relativ și fix în funcție de scroll.
3. Uitarea lui top/left/right/bottom — Un element poziționat fără aceste valori rămâne în poziția sa din flux.
4. Folosirea sticky în containere cu overflow: hidden — Sticky nu funcționează când părintele are overflow setat la hidden/scroll/auto.
5. Elemente fixed care acoperă conținutul — Adaugă padding pe body pentru a compensa.

Exercițiu

Creează o pagină cu un header fix sus, un sidebar sticky, un tooltip care apare la hover deasupra butoanelor și un badge în colțul unui card. Fiecare element trebuie să folosească o valoare diferită a lui position.

Întrebări frecvente

Construit de dezvoltatorii Doda Browser, DodaZIP și Durga Antivirus Pro. Uneltele DodaTech se integrează perfect cu CSS și HTML pentru productivitate și securitate sporită.