Kuidas CSS-is atribuuti position elementide joondamiseks kasutada

Elementide positsioneerimine veebiarenduses CSS-iga pole nii lihtne, kui tundub. Asjad võivad kiiresti keeruliseks muutuda, kui teie projekt suureneb ja kui te ei saa hästi aru, kuidas CSS HTML-elementide joondamisega tegeleb, ei saa te joondamisega seotud probleeme lahendada.

Elementide positsioneerimiseks puhta CSS-iga on erinevaid viise / meetodeid. CSS- ujuki kasutamine on levinumad viisid kuva ja asukoha omaduste järgi.

Selles artiklis selgitan ühte kõige segasemat viisi elementide joondamiseks puhta CSS-iga: positsiooni omadus. Mul on siin ka üks teine ​​CSS-i kuvaomandi õpetus.

Soovi korral saate vaadata CSS-i positsioneerimise õpetuse videoversiooni:

Alustagem...

CSS-i asukoha ja abistaja omadused

Seega on positsiooni atribuudil 5 peamist väärtust :

position: static | relative | absolute | fixed | sticky

ja lisaomadused elemendi koordinaatide määramiseks (ma nimetan neid abistaja omadusteks ):

top | right | bottom | left Ja z-index

Oluline märkus . Abistaja atribuudid ei tööta ilma deklareeritud positsioonita või positsiooniga: staatiline.

Mis see z-indeks on?

Meil on kõrgus ja laius (x, y) kahemõõtmelisena. Z on kolmas mõõde. Veebilehe element tuleb selle z-indexväärtuse suurenemisel teiste elementide ette .

Z-indeks ei tööta position: staticdeklareeritud positsiooniga ega ilma.

Videot saate vaadata minu kanalilt, et näha, kuidas z-indeksit täpsemalt kasutada:

Nüüd liigume positsiooni omaduste väärtustega ...

1. Staatiline

position: staticon vaikeväärtus . Sõltumata sellest, kas me selle deklareerime või mitte, paigutatakse elemendid veebilehel tavapärases järjekorras. Toome näite:

Esiteks määratleme oma HTML-i struktuuri:

Seejärel loome 2 kasti ja määrame nende laiused, kõrgused ja asukohad:

.box-orange { // without any position declaration background: orange; height: 100px; width: 100px; } .box-blue { background: lightskyblue; height: 100px; width: 100px; position: static; // Declared as static }

Nagu pildilt näeme, ei oma positsiooni määratlemine : staatiline või mitte mingit vahet.Ruudud on paigutatud vastavalt tavalisele dokumendivoole .

2. Suhteline

position: relative: Elemendi uus positsioon võrreldes normaalasendiga.

Alustades mittestaatilisest asendist position: relativeja kõikidestväärtuste abil saame elemendi vaikeasendit muuta , kasutades abistaja omadusi, mida ma eespool mainisin.

Liigutame oranži kasti sinise kõrval.

.box-orange { position: relative; // We are now ready to move the element background: orange; width: 100px; height: 100px; top: 100px; // 100px from top relative to its old position left: 100px; // 100px from left }
MÄRKUS. Elemendi position: suhteline kasutamine ei mõjuta teiste elementide positsioone.

3. Absoluutne

Aastal position: relativepaigutatakse element enda suhtes. Kuid absoluutselt lypositsioneeritud element on tema vanema suhtes .

position: absoluteTavalise dokumendivoo juurest eemaldatakse element koos . See asetatakse automaatselt oma põhielemendi alguspunkti ( vasakus ülanurgas) . Kui sellel pole ühtegi vanemelementi, on algdokument selle vanem.

Kuna position: absoluteelement eemaldatakse dokumendivoogust, mõjutatakse teisi elemente ja nad käituvad, kuna element eemaldatakse veebilehelt täielikult.

Lisame vanemelemendina konteineri :

.box-orange { position: absolute; background: orange; width: 100px; height: 100px; }

Nüüd näib, et sinine kast on kadunud, kuid pole. Sinine kast käitub nagu oranž kast eemaldataks, nii et see nihkub oranži kasti kohale.

Liigutame oranži kasti 5 pikslit:

.box-orange { position: absolute; background: orange; width: 100px; height: 100px; left: 5px; top: 5px; }

Absoluutselt paigutatud elemendi koordinaadid on tema vanema suhtes, kui vanemal on ka mittestaatiline asukoht. Vastasel juhul paigutavad abistaja omadused elemendi algosa suhtes .

.container { position: relative; background: lightgray; } .box-orange { position: absolute; background: orange; width: 100px; height: 100px; right: 5px; // 5px relative to the most-right of parent }

4. Parandatud

Sarnaselt position: absoluteeemaldatakse fikseeritud positsiooniga elemendid ka tavalisest dokumendivoogust. Erinevused on järgmised:

  • Nad on ainult dokumendi suhtes, mitte ühegi teise vanema suhtes.
  • Kerimine neid ei mõjuta .
.container { position: relative; background: lightgray; } .box-orange { position: fixed; background: orange; width: 100px; height: 100px; right: 5px; // 5px relative to the most-right of parent }

Siin näites muudan oranži kasti positsiooni fikseerituks ja seekord on see suhteline 5px, mitte tema vanem (konteiner) :

As we can see, scrolling the page doesn’t affect the fixed positioned box. It is not relative to its parent (container) anymore.

5. Sticky

position: sticky can be explained as a mix of position: relative and position: fixed.

It behaves until a declared point like position: relative, after that it changes its behavior to position: fixed . The best way to explain position: sticky is by an example:

IMPORTANT: Position Sticky is not supported in Internet Explorer and earlier versions of other browsers. You can check the browser support at caniuse.com.

The best way to understand the CSS Position Property is by practice. Keep coding until you have a better understanding. If something is not clear, I will answer your questions below in the comments section.

Kui soovite veebiarenduse kohta rohkem teada saada, jälgige mind julgelt Youtube'is !

Aitäh, et lugesid!