Umiestnenie CSS vzhľadom na blok. CSS - Polohovanie prvkov bloku. Umiestnenie vzhľadom na ľavý horný roh prehliadača

Posledná aktualizácia: 28.04.2016

CSS poskytuje možnosti umiestnenia prvkov, čo znamená, že môžeme umiestniť prvok na konkrétne miesto na stránke.

Hlavnou vlastnosťou, ktorá riadi umiestnenie v CSS, je vlastnosť position. Táto vlastnosť môže nadobúdať jednu z nasledujúcich hodnôt:

static : štandardné umiestnenie prvku, predvolená hodnota

absolútna : prvok je umiestnený vzhľadom na hranice prvku kontajnera, ak jeho vlastnosť polohy nie je statická

relatívne : Prvok je umiestnený vzhľadom na jeho predvolenú pozíciu. Hlavným účelom relatívneho umiestňovania zvyčajne nie je presunúť prvok, ale vytvoriť nový kotviaci bod pre absolútne umiestnenie jeho vnorených prvkov.

pevné : prvok je umiestnený vzhľadom na okno prehliadača, čo vám umožňuje vytvárať pevné prvky, ktoré pri posúvaní nemenia polohu

Na prvok by ste nemali súčasne aplikovať vlastnosť float a akýkoľvek iný typ umiestnenia ako statický (to znamená predvolený typ).

Absolútna poloha

Zobrazovacia oblasť prehliadača má horný, spodný, pravý a ľavý okraj. Každá z týchto štyroch hrán má zodpovedajúcu vlastnosť CSS: left, right, top a bottom. Hodnoty týchto vlastností sú špecifikované v pixeloch, ems alebo percentách. Nie je potrebné nastavovať hodnoty pre všetky štyri strany. Spravidla sú nastavené iba dve hodnoty - odsadenie od horného okraja hore a odsadenie od ľavého okraja doľava.

AHOJ SVET

Tu bude absolútna poloha divu 100 pixelov vľavo od okraja výrezu a 50 pixelov zdola.

Nie je až také dôležité, aby po tomto prvku div boli nejaké ďalšie prvky. Tento blok div bude v každom prípade umiestnený relatívne k hraniciam výrezu prehliadača.

Ak sa prvok s absolútnym umiestnením nachádza v inom kontajneri, ktorý má naopak hodnotu vlastnosti position nerovnajúcu sa static , prvok sa umiestni vzhľadom na hranice kontajnera:

Relatívne umiestnenie

Relatívne umiestnenie je tiež špecifikované pomocou relatívnej hodnoty. Na určenie konkrétnej polohy, do ktorej sa prvok posunie, sa použijú rovnaké vlastnosti hore, doľava, doprava, dole:

vlastnosť z-index

Ak majú dva prvky rovnaké orámovanie, prvok, ktorý je naposledy definovaný v značke html, sa štandardne zobrazuje nad druhým. Vlastnosť z-index vám však umožňuje zmeniť poradie prvkov, keď sú prekryté. Vlastnosť berie ako hodnotu číslo. Prvky s vyššou hodnotou z-indexu sa zobrazia nad prvkami s menšou hodnotou z-indexu.

Napríklad:

Teraz pridajte nové pravidlo do štýlu bloku redBlock:

RedBlock( z-index: 100; pozícia: absolútna; hore: 20px; vľavo:50px; šírka: 80px; výška: 80px; farba pozadia: červená; )

Tu je z-index 100. Ale nemusí to byť číslo 100. Keďže druhý blok má nedefinovaný z-index a je vlastne nula, pre redBlock môžeme nastaviť vlastnosť z-index na ľubovoľnú hodnotu väčšiu ako nula.

A teraz bude prvý blok prekrývať druhý a nie naopak, ako to bolo na začiatku.

Často v praxi musíme riešiť problém zoskupovania a zarovnávania obsahu pomocou CSS. Dnes sa pozrieme na hlavné spôsoby umiestňovania prvkov do vodorovného radu.

Materiál v tomto článku má pomôcť začínajúcim webovým dizajnérom zvládnuť techniky rozloženia webových stránok.

Čo si vybrať alebo metódy

Existuje niekoľko spôsobov, ako usporiadať konštrukčné prvky v rade v horizontálnej rovine. Najužitočnejšie z hľadiska praktickej aplikácie sú:

• "Float" metóda
• Metóda „inline-block“.
• Metóda tabuľka-bunka

Každý z nich má svoje výhody, aplikácie a nevýhody. Pozrime sa na ne v poradí.

„Pre prelom“ alebo trochu teórie

Všetky štrukturálne prvky HTML možno rozdeliť na:

V rade(vstavaný) – typ img, rozpätie a podobne. Nemáme možnosť zmeniť ich pozadie a dať im ľubovoľné lineárne rozmery.

Blokovať– zaberá celú šírku nadradeného bloku, vždy začína na novom riadku – p, h, rozd.

Vizuálny príklad inline a blokových štruktúr je uvedený nižšie:

Float metóda

Ako je už známe (pozri vyššie), prvok bloku sa umiestni na nový riadok, bez ohľadu na to, akú šírku má ( šírka). Preto zníženie horizontálnej veľkosti div-Ach, nemôžete stavať bloky v rade.

Najpopulárnejšou (najmä medzi začínajúcimi dizajnérmi dispozičného riešenia) metódou riešenia je využitie nehnuteľnosti plavák.

Vlastnosť CSS plavák Veľkú obľubu a praktickú hodnotu získal po prechode z metódy tabuľkového usporiadania na blokovú.

Plavák: vľavo (vpravo) transformuje prvok bloku na plávajúci, zarovná ho k ľavému (pravému) okraju nadradeného bloku a nastaví text a ďalšie prvky na zalomenie doprava (vľavo).

Vytvorme napríklad štyri bloky, ktoré je potrebné umiestniť do radu:

< html> < head> < meta charset= "utf-8" > < link rel= "stylesheet" media= "all" type= "text/css" href= "style.css" /> < body> < div class = "bblock" >staviame < div class = "bblock" >horizontálne < div class = "bblock" >riadok < div class = "bblock" >od divas

A externý predlohový list s nasledujúcim obsahom:

div ( float: left; /*Nastaviť balenie*/ line-height: 120px; veľkosť písma: 40px; pozadie: dodgeblue; farba: biela; margin-top: 60px; šírka: 320px; /*Upravte šírku bloku*/ }

Výsledkom sú štyri bloky usporiadané v horizontálnom rade a zarovnané k ľavému okraju nadradeného bloku:

Niekedy je v praxi potrebné zarovnať bloky k pravému okraju nadradeného prvku. Zmeňme tok okolo blokov v predchádzajúcom príklade:

plavák: pravý;

Venujte pozornosť nápisom umiestneným v blokoch. Na prvý pohľad sa môže zdať, že príklad fungoval krivo. V skutočnosti však prehliadač spracoval kód správne: prečítal bloky zhora nadol a urobil to, čo sme od neho požadovali - zarovnal ho doprava. Pri používaní nehnuteľnosti majte na pamäti tento bod plavák: vpravo.

Ak chcete prerušiť tok prvkov z určitého miesta, použite riadok:

< div style= "clear: both;" >

Vo vyššie uvedenom príklade nastavujeme vzdialenosť medzi blokmi pomocou odsadenia okraj-pravý. Čo však robiť, ak máte pri vyskladaní strany úlohu: umiestniť bloky do radu, vycentrovať ich a tiež mať odsadenia len medzi nimi, nie však von?

Algoritmus akcií je nasledujúci.

< div class = "wrap" > < div class = "bblock" >staviame < div class = "bblock" >horizontálne < div class = "bblock" >riadok < div class = "bblock" >od divas

Zalomiť ( šírka: 1310px; /*opravte šírku obalu*/ okraj: 0 auto; /*vycentrovať*/ pozadie: darkgrey; výška: 120px; /*Nastaviť výšku obalu*/). bblock ( float: left; /*Nastaviť balenie*/ line-height: 120px; /*Výška riadku + vert. centrovanie textu*/ veľkosť písma: 40px; pozadie: dodgeblue; farba: biela; šírka: 320px; /*Upravte šírku bloku*/ pravý okraj: 10px; text- align: center; /*Vycentrujte text vodorovne*/). wrap : last- child ( margin- right: 0px; /*Odstráň pole posledného div*/ }

V dôsledku toho dostaneme nasledujúci obrázok:

Nemôžete zvážiť všetky praktické situácie, takže prejdime k všeobecným funkciám.

Dôležité!!!

Inline-block metóda

Inline aj blokové prvky majú svoje výhody a nevýhody v kontexte každej konkrétnej riešenej úlohy. Čo ak skombinujete ich výhody?

Zoznámte sa s vrcholom programu - majetkom displej: inline-block.

displej: inline-block vygeneruje blokový riadkový prvok, ktorý je v podstate riadkovým prvkom, no zachováva si vlastnosti bloku – umožňuje meniť lineárne rozmery, nastavovať okraje, odsadenia atď.

Prvok blokového riadka má nasledujúce vlastnosti:

• Výška a šírka bloku sa určí automaticky na základe obsahu a hodnoty výplne ( vypchávka)
• výška a šírka bloku sa dá pevne nastaviť
• Neexistuje žiadny efekt zrútenia hraníc.

Pozrime sa na príklad vytvorenia jednoduchého navigačného menu obsahujúceho obrázok a odkaz.

< div class = "nav" > < p>< img src= "./vaden-pro-logo.png" alt= "" /> < p class = "string" >< a href= "#" >Odkaz na ponuku 1 je dlhší ako zvyčajne < div class = "nav" > < p>< img src= "./vaden-pro-logo.png" alt= "" /> < p class = "string" >< a href= "#" >Odkaz na menu 2 < div class = "nav" > < p>< img src= "./vaden-pro-logo.png" alt= "" /> < p class = "string" >< a href= "#" >Odkaz na menu 3 < div class = "nav" > < p>< img src= "./vaden-pro-logo.png" alt= "" /> < p class = "string" >< a href= "#" >Odkaz na menu 4

Nav ( zobrazenie: inline- block; /*Nastaviť blokové zobrazenie*/šírka: 180px; /*nastaviť šírku bloku*/ pozadie: dodgeblue; ). string ( text- align: center; /*Zarovnajte text vodorovne*/ }

V dôsledku toho dostaneme nasledujúce menu:

Ako vidíte, ukázalo sa to trochu pokrivené... Ale nechceme sa rozčuľovať, a tak na naše divy aplikujeme vlastnosť CSS vertikálne zarovnať(podrobnosti nájdete nižšie):

vertikálne zarovnať: hore;

Náš navigačný panel je teraz zarovnaný s horným riadkom:

Samozrejme, uvedený príklad je primitívny, ale som si istý, že na základe neho môžete vytvoriť skutočné majstrovské dielo!!!

Dôležité!!!

• Pre staršie verzie Firefoxu pridajte riadok:
  

  zobrazenie: - moz- inline- stack;

  
  a zabaľte prvok do ďalšieho obalu div.
• IE 7 a staršie verzie - pridajte riadky:
  

  priblíženie: 1 ; /*set hasLayout*/ * display: inline; /*hviezdička – hack pre IE */ _height: 250px; /*min-height nefunguje v IE6*/

• Podotýkam, že konkrétne prehliadače reagujú na tieto riadky selektívne (Firefox na prvý, IE na zvyšok).

Tabuľková metóda

Tabuľkový prístup je už dlho štandardom rozloženia, predovšetkým kvôli jednoduchosti a intuitívnosti označenia. S najväčšou pravdepodobnosťou to spôsobilo vzhľad formátovania tabuľky v CSS.

Vlastnosti displej: tabuľka (tabuľka-bunka, inline-table), umožňujú vykonávať tabuľkové formátovanie prvkov bez použitia tabuliek HTML.

Na umiestnenie blokov vodorovne potrebujeme nadradený prvok, ktorý má danú vlastnosť displej: tabuľka a podriadené prvky (bunky), ktoré majú danú vlastnosť displej: tabuľka-bunka:

< div class = "wrap" > < div class = "bblock" >staviame < div class = "bblock" >tabuľkový < div class = "bblock" >riadok < div class = "bblock" >od divas

Bblock ( zobrazenie: tabuľka- bunka; veľkosť písma: 32px; šírka: 200px; výška: 200px; pozadie: zlaté; zarovnanie textu: stred; zvislé zarovnanie: stred; ). wrap ( display: table; border- spacing: 20px 20px; background- color: darkgrey; )

Dôležité!!!

1. Na rozdiel od metód „Inline-block“ a „float“ sa pri zmenšovaní šírky okna webového prehliadača bunky neposúvajú nadol.
2. Nemáte možnosť nastaviť vlastnosť margin na pseudobunkách tabuľky.
3. Kompatibilita medzi prehliadačmi. Vlastnosti zo zobrazenia: rodina table* nie sú podporované IE6, IE7. Okrem toho v IE8 môžete vidieť chybu dynamického vykresľovania pre pseudotabuľkové prvky vo forme buniek, ktoré náhodne miznú. Táto chyba sa najčastejšie objavuje pri prvotnom kreslení dokumentu.

Predstavte si, že webový vývojár nemusí vôbec myslieť na to, ako bude hotová stránka vyzerať vizuálne. Jednoducho napíše kód, samotné prvky sa na stránke zoradia zhora nadol (blok) a zľava doprava (inline). Čím vyššie v dokumente je kód napísaný, tým vyššie sa na stránke zobrazí.

Vo všeobecnosti uvidíme prirodzené správanie prvkov a poradie, v ktorom sú zobrazené na stránke - tok dokumentu. Ale s týmto poradím nie sme vôbec spokojní, chceme umiestniť logo do ľavého horného rohu a tlačidlo trochu doprava. Potrebujeme úplnú kontrolu nad všetkými prvkami, rozhodujeme sa, kde a čo sa bude nachádzať. A na to potrebujete nástroj (vlastnosť), ktorý mení normálne správanie prvkov v toku. Čo je to za nehnuteľnosť?

IN CSSštýlov sa to nazýva polohovanie (pozícia), ktorý môže byť obyčajný (statický), príbuzný (príbuzný) a absolútne (absolútne).

Relatívne umiestnenie v CSS

O relatívne umiestnenie, blok sa posunie vzhľadom na svoju pôvodnú polohu. Po napísaní do bloku však:

Pozícia: relatívna;

nič sa nestane, zostane na mieste. A súradnicový systém posúva blok (hore, dole, vľavo, vpravo) s kladnými aj zápornými hodnotami.

Ako to funguje?

Vo vnútri žltého bloku s triedou blokovo-žltá je tam červený blok s triedou blokovo-relatívne. V normálnom toku červený blok prekrýva žltý, pretože je v kóde zapísaný ako posledný.

Musíme posunúť červený blok o 10 pixelov nadol. To sa dá urobiť iba násilnou zmenou polohy červeného bloku. Tak to píšeme hore: 10px, ale musíte uviesť, odkiaľ sa má počítať týchto 10 pixelov?

Po registrácii poloha: relatívna, dávame jasne najavo, že počítame vzhľadom na jeho aktuálnu pozíciu.

Blokovo žltá (
farba pozadia: #ffe70f;
}

Blokovo relatívne (
poloha: relatívna;
hore: 10px;
farba pozadia: #ed5b77;
}

Na obrázku vidíme, ako sa červený blok posunul nadol, o 10 pixelov nadol, zo svojej pôvodnej pozície.

Ak ho odstránite z kódu poloha: relatívna, potom blok zostane na mieste. Čo ak namiesto toho príbuzný, píšte absolútne, potom sa štandardne týchto 10 pixelov počíta od okraja okna prehliadača a v dôsledku toho sa náš blok naopak zdvihne a dosiahne spodný okraj prehliadača. A toto nebolo súčasťou našich plánov.

Absolútne umiestnenie v CSS

Na obrázku je blok absolútne umiestnené, vtedy sa súradnicový systém počíta od okraja prehliadača, nahradením len jedného slova sme zmenili polohu bloku.

Pozícia: absolútna;

Je tu jedna zvláštnosť. Absolútna poloha ovplyvňuje aj inline prvky. Ak je daný inline prvok pozícia: absolútna, potom sa bude správať ako bloková. Toto je analogické s nehnuteľnosťou - displej: blok.

To nie je všetko, „absolútny“ prvok nachádzajúci sa vo vnútri „relatívneho“ rodiča mení svoj súradnicový referenčný bod a začína byť umiestnený preč od rodiča.

Blok s triedou blokovo-absolútny byť vnútri rodiča blokovo-žltá.

Blokovo žltá (
poloha: relatívna;
výplň: 10px;
farba pozadia: #ffe70f;
}

Keďže žltý blok má relatívne umiestnenie, potom červený blok s absolútne umiestnenie, posunie sa vzhľadom k červenej o zadané pixely.

Blokovo-absolútne (
pozícia: absolútna;
dole: 10px;
vľavo: 10px;
farba pozadia: #ed5b77;
}

Pevné polohovanie

Pri posúvaní stránky blok s poloha: pevná, zostane na svojom mieste, táto metóda sa zvyčajne používa na opravu navigačnej lišty.

z-index

Rieši poradie prekrývajúcich sa „absolútnych“ blokov. Potrebujeme, aby červený blok bol na vrchole žltého, potom naznačíme z-index: 2 pre červenú a z-index: 1 pre žltú.

Bloková červená (
poloha: relatívna;
z-index: 2;
farba pozadia: #ffe70f;
}

Blokovo žltá (
pozícia: absolútna;
hore: 20px;
z-index: 1;
farba pozadia: #ed5b77;
}

Umiestnenie je jedným z kľúčových pojmov v usporiadaní blokov. Keď to pochopíte, veľa sa vám vyjasní a layout sa zo šamanizmu zmení na zmysluplný proces. Tento článok sa teda zameria na vlastnosti CSS. pozíciu A plavák.

1. poloha: statická

V predvolenom nastavení majú všetky prvky na stránke statické umiestnenie (position: static), čo znamená, že prvok nie je umiestnený a objaví sa v dokumente na svojom obvyklom mieste, teda v rovnakom poradí ako v značke HTML.

Nie je potrebné špecificky priraďovať túto vlastnosť žiadnemu prvku, pokiaľ nepotrebujete zmeniť predtým nastavené umiestnenie na predvolené.

#content( position: static; )

2.poloha:príbuzný

Relatívne umiestnenie (pozícia: relatívne) vám umožňuje použiť vlastnosti top, bottom, left a right na umiestnenie prvku vzhľadom na miesto, kde by sa objavil, keby bol umiestnený normálne.

Presuňme sa #content o 20 pixelov nadol a 40 pixelov doľava:

#content( pozícia: relatívna; hore: 20px; vľavo: -40px; )

Všimnite si, že tam, kde by bol náš blok #content, je teraz prázdne miesto. Po bloku #content sa blok #footer neposunul nižšie, pretože #content stále zaberá svoje miesto v dokumente, aj keď sme ho presunuli.

V tejto fáze sa môže zdať, že relatívne polohovanie nie je až také užitočné, ale neunáhlite sa so závermi, neskôr v článku sa dozviete, na čo všetko sa dá využiť.

3. poloha: absolútna

Pri absolútnom umiestnení (position: absolute) sa prvok z dokumentu odstráni a zobrazí sa tam, kde mu prikážete.

Presuňme napríklad blok #div-1a do pravého horného rohu stránky:

#div-1a ( pozícia:absolútna; hore:0; vpravo:0; šírka:200px; )

Všimnite si, že tentoraz, pretože blok #div-1a bol z dokumentu odstránený, zostávajúce prvky na stránke boli umiestnené inak: #div-1b, #div-1c a #footer boli presunuté vyššie, namiesto odstráneného bloku . A samotný blok #div-1a sa nachádza presne v pravom hornom rohu stránky.

Takto môžeme umiestniť ľubovoľný prvok vzhľadom na stránku, ale to nestačí. V skutočnosti musíme umiestniť #div-1a relatívne k rodičovskému bloku #content. A v tomto bode opäť vstupuje do hry relatívne polohovanie.

4. poloha: pevná

Pevné polohovanie (position: fixed) je podsekciou absolútneho polohovania. Jeho jediný rozdiel je v tom, že je vždy vo viditeľnej oblasti obrazovky a pri posúvaní stránky sa nepohybuje. V tomto ohľade je to trochu ako pevný obrázok na pozadí.

#div-1a ( position:fixed; top:0; right:0; width:200px; )

V IE s pozíciou: pevná nie je všetko tak hladké, ako by sme chceli, ale existuje mnohými spôsobmi obísť tieto obmedzenia.

5. poloha:relatívna + poloha:absolútna

Priradením relatívnej pozície bloku #content (pozícia: relatívne) môžeme umiestniť ľubovoľné podradené prvky vzhľadom na jeho hranice. Umiestnime blok #div-1a do pravého horného rohu bloku #content.

#content ( position:relative; ) #div-1a ( position:absolute; top:0; right:0; width:200px; )

6. Dva stĺpce

Vyzbrojení znalosťami z predchádzajúcich krokov môžete skúsiť vytvoriť dva stĺpce pomocou relatívneho a absolútneho umiestnenia.

#content ( pozícia:relatívna; ) #div-1a ( pozícia:absolútna; hore:0; vpravo:0; šírka:200px; ) #div-1b (pozícia:absolútna; hore:0; vľavo:0; šírka:200px ;

Jednou z výhod absolútneho umiestňovania je možnosť umiestniť prvky v ľubovoľnom poradí bez ohľadu na to, ako sú umiestnené v značke. Vo vyššie uvedenom príklade je blok #div-1b umiestnený pred blokom #div-1a.

A teraz by ste si mali položiť otázku: "Kam sa podel zvyšok prvkov z nášho príkladu?" Ukrývali sa pod perfektne umiestnenými blokmi. Našťastie existuje spôsob, ako to napraviť.

7. Dva stĺpy s pevnou výškou

Jedným z riešení je dať nádobe obsahujúcej stĺpce pevnú výšku.

#content ( position:relative; height: 450px; ) #div-1a ( position:absolútna; hore:0; right:0; width:200px; ) #div-1b (position:absolute; top:0; left:0 ;width:200px;

Riešenie nie je príliš vhodné, keďže nikdy vopred nevieme, aká veľkosť textu bude v stĺpcoch umiestnená a aké písmo bude použité.

8. Plávať

Pre stĺpce s premenlivou výškou nie je možné absolútne umiestnenie, takže sa pozrime na inú možnosť.

Priradením plaváka k bloku ho zatlačíme čo najviac k pravému (alebo ľavému) okraju a text za blokom bude prúdiť okolo neho. Táto technika sa zvyčajne používa na obrázky, ale my ju použijeme na zložitejšie úlohy, pretože je to jediný nástroj, ktorý máme k dispozícii.

#div-1a ( float:left; width:200px; )

9. „Plávajúce“ reproduktory

Ak prvému bloku priradíme float: left a potom float: left druhému, každý blok sa posunie k ľavému okraju a získame dva stĺpce s premenlivou výškou.

#div-1a ( float:left; width:150px; ) #div-1b ( float:left; width:150px; )

Stĺpcom môžete priradiť aj opačnú hodnotu float, v takom prípade budú rozdelené pozdĺž okrajov kontajnera.

#div-1a ( float:right; width:150px; ) #div-1b ( float:left; width:150px; )

Teraz však máme ďalší problém – stĺpce presahujú nadradený kontajner, čím narúšajú celé rozloženie. Toto je najčastejší problém začínajúcich dizajnérov rozloženia, aj keď sa dá vyriešiť celkom jednoducho.

10. Čistenie plaváka

Čistenie plavákov je možné vykonať dvoma spôsobmi. Ak je za stĺpcami ďalší blok, stačí k nemu priradiť clear: oba.

#div-1a ( float:left; width:190px; ) #div-1b ( float:left; width:190px; ) #div-1c (clear:both; )

Alebo priraďte vlastnosť overflow: hidden k nadradenému kontajneru

#content ( overflow:hidden; )

V každom prípade bude výsledok rovnaký.

Záver

Dnes sa zvažovali len základné techniky polohovania a najjednoduchšie príklady. Na pomoc začínajúcim dizajnérom layoutu tiež vždy odporúčam sériu článkov od Ivana Sagalajeva, ktoré mi svojho času veľmi pomohli.

Od autora: Pozdravujem. Umiestnenie prvkov CSS je veľmi dôležitou témou pri tvorbe webových stránok. V tomto článku navrhujem pozrieť sa na to podrobnejšie, všetky spôsoby, ako presúvať bloky po webovej stránke.

Aké sú typy

Ak hovoríme o polohovaní prvkov bloku, nastavuje sa pomocou vlastnosti position. Má štyri významy a každý si zaslúži osobitnú pozornosť.

Absolútna poloha

Toto je prvý známy druh. Nastavuje sa takto: poloha: absolútna. Potom blok stráca svoje obvyklé vlastnosti a úplne vypadne z normálneho toku. Čo je to za prúd? Skúste do svojho označenia umiestniť niekoľko prvkov bloku za sebou. Ako sa stanú? Jeden po druhom a nič iné.

Toto je štandardné správanie blokov. Čo sa však stane s blokom, ktorý má definované absolútne umiestnenie? Úplne vypadne z bežného toku, ostatné bloky si ho jednoducho prestanú všímať, akoby nikdy neexistoval, ale prvok na stránke zostáva. Absolútne umiestnenie v CSS sa často používa na presné umiestnenie dekoratívnych prvkov, ikon a iných dizajnových vecí.

Teraz ho možno presúvať pomocou vlastností vľavo, vpravo, hore a dole. V predvolenom nastavení je pohyb relatívny k okrajom okna prehliadača, ale ak má nadradený prvok pozíciu: relatívny, potom je pohyb relatívny k nadradenému bloku.

Blok (pozícia: absolútna; spodná: 0; pravá: 0; )

Blokovať ( pozícia: absolútna; spodná časť: 0; vpravo: 0;

Prvok sa presunie do pravého dolného rohu. Všimol som si, že často robia horné tlačidlo týmto spôsobom - jednoducho ho umiestnia úplne do rohu. Tu je ďalší príklad, v ktorom najskôr ukážem možné označenie:

< div id = "wrapper" > < div class = "block" > < / div > < / div >

A teraz štýly css pre tento fragment:

#wrapper( pozícia: relatívna; ) .block( pozícia: absolútna; hore: 0; vpravo: 10px; )

#wrapper( poloha: relatívna; Blokovať ( pozícia: absolútna; hore: 0; vpravo: 10px;

V tomto príklade sme najprv priradili relatívne umiestnenie nadradenému kontajneru (relatívne – o tom neskôr v článku) a potom sme nastavili absolútne umiestnenie pre rovnaký prvok.blok. Výsledkom je, že súradnice sa nebudú počítať zo samotného okna prehliadača, ale z okrajov nadradeného prvku, teda bloku obalu.

Relatívne umiestnenie css prvkov

Toto je ďalší typ a píše sa takto – poloha: relatívna. Súradnice sú určené rovnakými vlastnosťami ako pre absolútnu polohu. Jediný podstatný rozdiel je v tom, že prvok z toku formálne nevypadáva – ostal naň priestor.

Fungovanie tejto hodnoty možno prirovnať k viditeľnosti: skryté, keď je prvok skrytý zo stránky, ale priestor pod ním zostáva nedotknutý. To isté sa deje pri relatívnom umiestnení - blok je možné presunúť kamkoľvek, ale priestor preň zostane prázdny a nebude obsadený inými časťami.

Dôležité je tiež vedieť, že odsadenie nenastáva od okrajov okna webového prehliadača, ale od miesta, kde blok pôvodne stál. To je:

Blok (pozícia: relatívna; hore: 10px; vpravo: 50px; )

Blokovať ( poloha: relatívna; hore: 10px; vpravo: 50px;

Blok sa posunie o 50 pixelov doprava a o 10 doľava.

Fixácia

Pravdepodobne ste už viackrát videli na stránkach na internete, keď pri rolovaní nejaký banner nezmizol, ale zostal vo vašej zóne viditeľnosti, akoby prilepený na jednom mieste. Toto sa realizuje hlavne pomocou pevného polohovania. Ak to chcete urobiť, musíte napísať:

Poloha: statická alebo normálna statická poloha

Posledný typ je statický, to je normálne správanie prvkov bloku. Nie je potrebné ju špecifikovať, pretože je štandardne nastavená, ale stále potrebujete vedieť o štvrtej hodnote. Niekedy sa pozícia: static zapíše, aby prepísala iný druh umiestnenia, keď sa na webovej stránke vyskytnú určité udalosti.

Ako správne umiestniť bloky v css?

O významoch sme diskutovali, ale na uzavretie tejto témy to nestačí. V skutočnosti musíte pochopiť, kde a aké typy polohovania je potrebné použiť. Už som vám uviedol príklad s fixným - dá sa použiť na vytvorenie lepiacich bočných stĺpcov, hlavičiek alebo pätiek.

Relatívne polohovanie pomôže, keď potrebujete mierne posunúť blok vzhľadom na jeho polohu a zároveň udržať jeho miesto v prúde. Rodičovským blokom je tiež dané použiť absolútny pohyb pre podradené prvky.

Ďalšie techniky: centrovanie, plávajúce bloky

Vlastnosť position nerieši všetky problémy s umiestnením prvkov bloku. Ako by ste napríklad pomocou nej vytvorili mriežku lokality? Nemám dobré nápady. Tu prichádzajú na pomoc ďalšie nehnuteľnosti.

Mriežky sa často vyrábajú pomocou plavákov v CSS. Táto vlastnosť vám umožňuje stlačiť blok na ľavý alebo pravý okraj rodiča (float: left, float: right), čo umožňuje niekoľko prvkov bloku zoradiť sa do jedného riadku, čo je bežné na akejkoľvek stránke.

Centrovanie sa robí takto: blok potrebuje napísať určitú šírku a potom nastaviť okraj: 0 auto property. Je to automatická hodnota, ktorá ho zarovná vodorovne presne na stred. Prirodzene, na to musí byť jediný vo svojom rade, inak nebude nič fungovať.

Všetky typy polohovania uvedené v tomto článku môžu byť užitočné pre webového vývojára. Niekde je potrebné vložiť ikonu (pozícia: absolútna), niekde je potrebné mierne upraviť polohu bloku a nechať za ním určitý priestor (pozícia: relatívna) a niekde je potrebné opraviť widget (pozícia: pevná). Vo všeobecnosti znalosť tejto vlastnosti určite nebude zbytočná.

Ak sa chcete dozvedieť ešte viac zo sveta tvorby webových stránok, určite sa prihláste na odber nášho blogu a získajte nové školiace materiály. Radím pozrieť aj u nás, kde sa podobná téma tiež otvára. (umiestnenie prvkov)