Strelec je často ťažké umiestniť prvky cez CSS. V skutočnosti je vlastnosť CSS Position omnoho ľahšie sa naučiť, ako sa zdá na prvý pohľad. Po zvládnutí získate výkonný nástroj, ktorý vám umožní na správnych miestach usporiadať všetky prvky stránky. Ale aby sme dosiahli výsledok, musíme poznať všetky existujúce významy, pretože princípy ich konania sa značne líšia

Špecifickosť vytvárania toku dokumentu

Pozícia CSS pracuje s tokom webovej stránky. Ako to pochopiť? Štandardne sú všetky prvky stránky usporiadané v poradí, v akom ste ich vytvorili v html značke. Ak sa hlavička značky nachádza nad značkou päty, stránka sa zobrazí vyššie. Naopak, ak sa nejako rozhodnete umiestniť pätu v html cez "hostiteľa", nad "klobúkom" sa zobrazí "suteréna" stránky. V tomto prípade blokové prvky zaberajú všetku dostupnú šírku. Lineárne, na druhej strane, sú usporiadané v jednej línii, kým ich nevyberú všetko a potom začnú byť prevedené na nové. Tento príkaz sa nazýva tok dokumentu. "


Ak chcete zmeniť správanie prietoku, použite vlastnosť Poloha v CSS. Môže sa tiež zmeniť v dôsledku vlastností plaváka, ale nebudeme to brať do úvahy. Pomocou polohovania je možné vytlačiť prvok z bežného prúdu, po ktorom sa začne správať novým spôsobom. Ako presne - závisí od hodnoty použitého majetku.

Pozícia CSS: statická

Pozícia: statické alebo statické polohovanie je predvolená hodnota pre všetky html bloky, ktoré ste vytvorili. Za normálnych okolností sa s tým nemusíte vyrovnávať. Ak pre akýkoľvek blok alebo riadok nie je určená žiadna pozícia, potom má hodnotu statickú. Na stránke sa táto zložka zobrazuje v súlade s prúdom. Ak zadáte vlastnosť vpravo /vľavo alebo hore /dole, nebude to mať žiadny vplyv.

Pozícia CSS: pevná

Pri použití tejto vlastnosti sa prvok nachádza mimo normálneho toku dokumentu. Teraz je jeho pozícia vypočítaná vzhľadom na okno prehliadača bez ohľadu na to, ako sú umiestnené ostatné komponenty. Inými slovami, pozícia: pevný blok sa dostane do hornej časti stránky, bude kolísať na okraj okna prehliadača a ostatné prvky nahradia jeho miesto v súlade s prúdom. Hlavnou črtou prvkov s pevným umiestnením je to, že sa môžu prekrývať s ostatnými blokmi a reťazcami stránok. Pri posúvaní bloku s pozíciou: pevná bude zrejme zostať na mieste bez toho, aby zmizla z obrazovky. To je užitočné, ak potrebujete navigáciu alebo podobnú položku, ku ktorej má používateľ vždy prístup. Pevné umiestnenie sa uplatňuje aj vtedy, ak chcete umiestniť tlačidlo rýchleho posúvania na určitú časť stránky.

Pozícia CSS: relatívna

Použitie tejto vlastnosti sa nazýva relatívna poloha. Ak nastavíte položku Pozícia: relatívna, to je jednazostane na mieste. Na prvý pohľad sa nič zvláštne nestane, ale všetko sa zmení, ak použijete vlastnosti pravého /ľavého a horného /dolného dodatočne. S ich pomocou môžete ovládať pohyb komponentu vzhľadom na jeho polohu. Na mieste, kde bol blok alebo linka predtým, bude prázdny priestor - ostatné prvky zostanú vo svojich pozíciách bez toho, aby venovali pozornosť voľnému priestoru.
Pri presúvaní komponentov neovplyvňuje polohu okolitých častí stránky. Zostanú na svojich miestach, aj keď ich umiestnený blok môže zablokovať. Samotný majetok je zriedka používaný. Obvykle sa používa v kombinácii s nasledujúcou možnosťou.

Absolútne umiestnenie

Jedna z najzaujímavejších a najpoužívanejších variantov. Ak použijete vlastnosť Pozícia s absolútnou hodnotou komponentu, komponenta stránky sa započíta do okna prehliadača. Iné prvky (nie absolútne umiestnené), akoby "zabudli" na existenciu "sestry" s pozíciou: absolútne a zaujmú jej miesto v potoku. Zdá sa, že všetko je presne to isté ako v prípade pozície: pevná, ale existujú vážne rozdiely. Po prvé, poloha prvku môže byť voľne kontrolovaná - pre toto použitie vlastnosti horná /pravá /spodná /ľavá. Napríklad, ak nastavíte dolnú hodnotu na: 100px, blok bude "zdržať" od spodnej strany stránky o 100 pixelov. Po druhé, keď rolovanie predstavuje "absolútnu" zložkuzostane na mieste namiesto navigácie cez stránku.

Interakcia absolútnych blokov s rodičovskými prvkami

Je možné dosiahnuť ešte presnejšiu kontrolu nad komponentom absolútnej polohovania. Aby ste to urobili, musíte nastaviť majetok jeho otca Pozícia: pevná, relatívna alebo absolútna. Zvážte príklad. Máte div s triedou relatívnej-div, v ktorej je trieda div s absolútnou triede div. Interný blok nastavíme na pozíciu: absolútna. Okamžite "letí" z prúdu a objaví sa niekde hore, pretože teraz sa jeho poloha vypočíta vo vzťahu k oknu prehliadača. Teraz nastavíme blok s relatívnou-div triedy Pozícia: relatívna a "márnotratný syn" sa vráti na miesto. Takmer. V skutočnosti sa to nachádza v ľavom hornom rohu nadradeného prvku.
Prečo sa to deje? Prípad v špecifikách pozície: absolútna vlastnosť. Štandardne je jeho stav závislý na prehliadači, ale ak je "rodič" umiestnený niekde okrem statickej, pozícia začína závisieť od rodičovského elementu. To je veľmi výhodné, pretože môžete umiestniť komponentu kdekoľvek, bez započítania obrovských čísel v okne prehliadača. Recepcia sa často používa na umiestnenie ikon, tlačidiel a iných drobných predmetov.

Pozícia CSS uprostred

Jedným z hlavných problémov pre začiatočníkov je vycentrovať prvok vertikálne a horizontálne. Správne pomocou funkcie Pozícia je jednoduchšie, aby to bolo jednoduché. Pozícia CSS: absolútne v stredeje nastavené nasledovne. Predpokladajme napríklad, že ste absolvovali triedu absolute-div, ktorá je v božskej triede relativne-div. "Otec" je umiestnený vzhľadom na šírku, ktorá sa rovná šírke celej stránky. "Potomník" má šírku a výšku 400 px, absolútne umiestnenie a v predvolenom nastavení sa nachádza v ľavom hornom rohu nadradeného prvku. Všetko, čo musíte urobiť, je nastaviť absolútnu hornú zložku: 50% a vľavo: 50%. Takmer hotovo! Absolútne div sa presťahoval z miesta a ocitol sa takmer v strede, ale vôbec nie. Uprostred "otca" sa vzťahuje jeho región a potrebujeme centrovať stredisko "potomstva" v strede bloku. Ak to chcete urobiť, musíte nastaviť margin-left a margin-right s hodnotami -200 px. Preto presunieme absolútne umiestnený blok o polovicu jeho výšky a šírky. Všetko, čo je v centre!

Prekrytie komponentov

Problém môže byť na svojich "susedoch" komplikovaný na prvý pohľad "presahujúce" polohovacie prvky. Napríklad komponent s pozíciou: opravený prekryje všetko, čo sa nachádza na stránke. Situáciu môžete vyriešiť pomocou vlastností z-indexu, ale pamätajte, že funguje len pre pozitívne položky. Preto ak chcete umiestniť blok na pevne umiestnenú položku, bude tento blok tiež musieť nastaviť polohu. Napríklad relatívny. Najlepším spôsobom, ako zvládnuť pozíciu, je pozrieť sa na príklady pozície CSS, experimentovať a vyskúšať niečo vo svojom. Pokúste sa učiťpoužite ju v spojení s funkciou calc () - umožní vám flexibilnejšie konfigurovať polohu. Nezabudnite však, že táto vlastnosť nie je určená na vytvorenie celej mriežky stránky. Použite ho na pohyb relatívne malých prvkov, inak môže byť veľmi ľahké zmätok.