Umístění prvků HTML. CSS - Polohování prvků bloku

Weboví vývojáři dnes mohou vytvářet komplexní rozvržení webových stránek pomocí různých technik CSS. Některé z těchto technik mají dlouhou historii (floaty), jiné (flexbox) si v posledních letech získaly oblibu.

V tomto článku se blíže podíváme na některé málo známé věci o umístění CSS.

Než začneme, pojďme si krátce zopakovat základy různých typů polohování.

Přehled dostupných metod určování polohy

Vlastnost CSS position definuje typ umístění prvku.

Možnosti umístění

static je výchozí hodnota vlastnosti umístění. Uvádíme, že tento prvek nepoužívá polohování – polohování se použije pouze v případě, že zadáte jiný než výchozí typ polohování.

Chcete-li to provést, nastavte vlastnost position na jednu z následujících hodnot:

• relativní
• absolutní
• pevný
• lepkavý

A teprve po nastavení umístění můžete použít vlastnosti, které posunují prvek:

• že jo
• dno
• Počáteční hodnotou těchto vlastností je klíčové slovo auto.

Mějte na paměti, že pokud má prvek vlastnost position nastavenou na absolutní nebo pevnou , pak se jedná o absolutně umístěný prvek. Také u umístěných prvků začíná fungovat vlastnost z-index, která určuje pořadí překrývání.

Rozdíly mezi hlavními metodami polohování

Nyní se rychle podívejme na tři základní rozdíly mezi dostupnými typy polohování:

• absolutně (absolutně) umístěné prvky jsou zcela odstraněny z proudu, jejich místo zaujímají nejbližší sousedé.
• relativně umístěné (relativní) a lepkavé (lepivé) si své místo v toku udrží a jejich nejbližší sousedé ho neobsadí. Polstrování těchto prvků však nezabírá místo, ale je zcela ignorováno jinými prvky, a to může vést k překrývání prvků.
• pevné prvky (a pevné umístění je druh absolutního umístění) jsou vždy umístěny vzhledem k výřezu (bez ohledu na umístění předků), zatímco lepivé prvky jsou umístěny vzhledem k nejbližšímu předku pomocí rolování (overflow:auto). A pouze v nepřítomnosti takových předků jsou umístěny vzhledem k zóně viditelnosti.

Podrobněji to můžete vidět v ukázce:

Poznámka: Umístění „pevných prvků“ je stále experimentální technologie s omezenou podporou prohlížeče. Samozřejmě, pokud si přejete, můžete použít polyfill k přidání této funkce do prohlížeče, ale vzhledem k nízkému rozšíření této vlastnosti nebude tento článek diskutován.

Polohovací prvky s absolutním typem polohy

Jsem si jistý, že většina z vás ví, jak funguje absolutní polohování. Pro začátečníky však může mnoho věcí v něm zmást.

Proto jsem se rozhodl při popisu málo známých vlastností polohování začít právě jím.

Absolutně umístěný prvek je tedy odsazen od svého nejbližšího umístěného předka. Samozřejmě to funguje, pokud má některý z předků jinou polohu než statickou – pokud prvek nemá žádné umístěné předky, je posunutý z rozsahu.

Demonstruje to následující příklad:

V tomto demu je zelený rámeček zpočátku umístěn absolutně s nulovým odsazením dole:0 a vlevo:0, jeho předchůdce (červený rámeček) nebyl umístěn vůbec.

Relativně jsme však umístili vnější obal (prvek s třídou jumbotron). Všimněte si, jak se změní umístění zeleného bloku, když se změní typ umístění jeho předků.

Absolutně umístěné prvky ignorují vlastnost float

Pokud aplikujeme absolutní nebo pevné umístění na plovoucí prvek, vlastnost float bude nastavena na none . Na druhou stranu, pokud nastavíme relativní umístění, prvek zůstane plovoucí.

Podívejte se na související demo:

V tomto příkladu definujeme dva různé prvky plovoucí doprava. Všimněte si, že když se červený rámeček absolutně umístí, ignoruje hodnotu vlastnosti float, zatímco relativně umístěný zelený rámeček si zachová hodnotu float.

Absolutně umístěné vložené prvky se stanou blokovými prvky

Inline prvek s absolutním nebo pevným umístěním získává vlastnosti blokového prvku. Převod inline prvků na blokové prvky je podrobněji popsán v tabulce.

V tomto případě jsme vytvořili dva různé prvky. První (zelený blok) je blokový prvek a druhý (červený blok) je vložený prvek. Zpočátku je vidět pouze zelený blok.

Červený rámeček není vidět, protože v něm nastavené vlastnosti width a height fungují pouze s prvky na úrovni bloku a vloženém bloku, a protože nemá žádný obsah, nemá žádné velikosti.

Když červenému rámečku přiřadíte absolutní nebo pevnou pozici, stane se blokovým a uplatní se v něm zadané velikosti bloků.

Absolutně umístěné prvky nemají sbalení výplně

Ve výchozím nastavení, když se dotknou dva svislé okraje, sloučí se do jednoho rovného největšímu z nich. Tomu se říká zhroucení marže.

Chování absolutně umístěných prvků je zde podobné jako u plovoucích prvků – jejich výplně nejsou sloučeny se svými sousedy.

V této ukázce má prvek výplň 20px. Jeho výplň se sbalí s výplní nadřazeného prvku, také 20px. Jak vidíte, pouze absolutní umístění se nezhroutí.

Jak ale můžeme zabránit zborcení vycpávky? Musíme mezi ně dát nějaký oddělovač.

Může to být odsazení nebo ohraničení a lze jej použít na nadřazené i podřízené prvky. Další možností je přidat clearfix k rodičovskému prvku.

Umístění prvků s pixely a procenty

Už jste někdy použili procenta místo pixelů k umístění prvků? Pokud je odpověď ano, pak víte, že offset prvku závisí na zvolených jednotkách (pixely nebo procenta).

Je to trochu trapné, ne? Nejprve se tedy podívejme, co specifikace říká o procentuálním offsetu:

Odsazení jako procento šířky (pro levou a pravou stranu) nebo výšky (nahoře nebo dole) nadřazeného bloku. U lepených prvků se odsazení vypočítá jako procento šířky (pro levou a pravou stranu) nebo výšky (nahoře nebo dole) toku. Záporné hodnoty jsou povoleny.

Jak již bylo zmíněno, při nastavení offsetu v procentech závisí poloha prvku na šířce a výšce jeho rodiče.

Demo ukazuje tento rozdíl:

Tento příklad používá pixely a procenta pro posun. Při zadávání offsetu v pixelech se prvek samozřejmě posune tam, kde má být.

A pokud pro offset zvolíme procenta, bude výsledek záviset na velikosti nadřazeného prvku. Zde je vizualizace ukazující, jak se nová pozice počítá:

Poznámka: jak pravděpodobně víte, vlastnost transform (společně s různými funkcemi překladu) také umožňuje změnit polohu prvku. Ale v tomto případě při použití procent bude výpočet založen na velikosti samotného prvku a ne na jeho rodiči.

Závěr

Doufám, že vám tento článek pomohl lépe porozumět pozicování v CSS a objasnil hlavní problémy.

Představte si, že webový vývojář nemusí vůbec přemýšlet o tom, jak bude vizuálně hotová stránka vypadat. Prostě napíše kód, samotné prvky se na stránce seřadí, shora dolů (blok) a zleva doprava (inline). Čím výše je kód napsán v dokumentu, tím výše se na stránce objeví.

Obecně uvidíme přirozené chování prvků a pořadí, ve kterém jsou zobrazeny na stránce - tok dokumentu. S tímto pořadím ale nejsme vůbec spokojeni, logo chceme umístit do levého horního rohu a tlačítko trochu doprava. Potřebujeme plnou kontrolu nad všemi prvky, my rozhodujeme, kde a co bude. A k tomu potřebujete nástroj (vlastnost), který změní obvyklé chování prvků v proudu. co je to za vlastnost?

V css styly se tomu říká umístění (pozice), což může být normální (statický), relativní (relativní) a absolutní (absolutní).

Relativní umístění v CSS

Na relativní polohování, blok se posune vzhledem k jeho původní poloze. Nicméně zápisem do bloku:

poloha: relativní;

nic se neděje, zůstane tam, kde je. A přesune blokový souřadný systém (nahoře, dole, vlevo, vpravo) s kladnými i zápornými hodnotami.

Jak to funguje?

Uvnitř žlutého bloku s třídou blokově žluté je tam červený blok s třídou blokovat relativní. V normálním toku červený blok překrývá žlutý, protože je poslední v kódu.

Potřebujeme posunout červený blok dolů o 10 pixelů. To lze provést pouze násilnou změnou polohy červeného bloku. Takto píšeme nahoře: 10px, ale musíte určit, z čeho se má těchto 10 pixelů počítat?

Předepisování poloha: relativní, ujasníme si, co se má počítat vzhledem k jeho aktuální poloze.

blokově žlutá (
barva pozadí: #ffe70f;
}

relativní blok (
poloha: relativní;
nahoře: 10px;
barva pozadí: #ed5b77;
}

Na obrázku můžeme vidět, jak se červený blok posunul dolů, o 10 pixelů dolů, ze své původní pozice.

Pokud je z kódu odstraněn poloha: relativní, pak blok zůstane na místě. A pokud místo toho relativní, napsat absolutní, pak se standardně těchto 10 pixelů bude počítat od okraje okna prohlížeče a v důsledku toho se náš blok naopak zvedne nahoru a vytáhne se až ke spodnímu okraji prohlížeče. A to nebylo součástí našich plánů.

Absolutní umístění v CSS

blok na obrázku umístěn absolutně, to je, když se souřadnicový systém počítá od okraje prohlížeče a nahrazuje pouze jedno slovo, změnili jsme polohu bloku.

pozice: absolutní;

Existuje jedna funkce. Absolutní umístění ovlivňuje také inline prvky. Pokud je zadán vložený prvek pozice: absolutní, pak se bude chovat jako blok. To je analogie nemovitosti - displej:blok.

To není vše, „absolutní“ prvek, umístěný uvnitř „relativního“ rodiče, změní svůj souřadnicový referenční bod a začne polohovat od rodiče.

Blok s třídou blok-absolutní být uvnitř rodiče blokově žluté.

blokově žlutá (
poloha: relativní;
výplň: 10px
barva pozadí: #ffe70f;
}

Vzhledem k tomu, že žlutý blok má relativní umístění, pak červený blok s absolutní umístění, je posunuta vzhledem k červené o dané pixely.

blok-absolutní (
pozice: absolutní;
dole: 10px;
vlevo: 10px;
barva pozadí: #ed5b77;
}

Pevné umístění

Při rolování stránky se blok s poloha: pevná, zůstane na místě, což je běžná metoda používaná k připnutí navigační lišty.

z-index

Vyřeší překrývající se pořadí "absolutních" bloků. Potřebujeme, aby červený blok byl nahoře nad žlutým, pak upřesníme z-index: 2 pro červenou a z-index: 1 pro žlutou.

blokově červená (
poloha: relativní;
z-index: 2;
barva pozadí: #ffe70f;
}

blok-žlutý (
pozice: absolutní;
nahoře: 20px;
z-index: 1;
barva pozadí: #ed5b77;
}

Umístění je jedním z klíčových konceptů v blokovém uspořádání. Když se s tím vypořádáte, mnohé se vám vyjasní a rozložení se ze šamanismu promění ve smysluplný proces. Tento článek se tedy zaměří na vlastnosti CSS. pozice A plovák.

1 poloha: statická

Ve výchozím nastavení jsou všechny prvky na stránce umístěny staticky (pozice: static), což znamená, že prvek není umístěn a objeví se v dokumentu na svém obvyklém místě, tedy ve stejném pořadí jako v html označení.

Tuto vlastnost není potřeba konkrétně přiřazovat žádnému prvku, pokud nepotřebujete změnit dříve nastavenou pozici na výchozí.

#content( position: static; )

2.poloha:relativní

Relativní umístění (pozice: relativní) vám umožňuje použít vlastnosti nahoře, dole, vlevo a vpravo k umístění prvku vzhledem k tomu, kde by se objevil při normálním umístění.

Posuňme se #content o 20px dolů a 40px doleva:

#content( pozice: relativní; nahoře: 20px; vlevo: -40px; )

Všimněte si, že tam, kde měl být náš blok #content, je nyní prázdné místo. Po bloku #content se blok #footer neposunul dolů, protože #content má stále své místo v dokumentu, i když jsme jej přesunuli.

V této fázi se může zdát, že relativní polohování není tak užitečné, ale neuspěchejte se závěry, později v článku se dozvíte, k čemu se dá použít.

3. poloha: absolutní

Při absolutním umístění (pozice: absolutní) je prvek z dokumentu odstraněn a objeví se tam, kde mu přikážete.

Přesuňte například blok #div-1a do pravého horního rohu stránky:

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

Všimněte si, že tentokrát, protože byl z dokumentu odstraněn blok #div-1a, jsou zbývající prvky na stránce umístěny jinak: #div-1b, #div-1c a #footer se přesunuly nahoru na pozici odstraněný blok. A samotný blok #div-1a se nachází přesně v pravém horním rohu stránky.

Můžeme tedy umístit libovolný prvek vzhledem ke stránce, ale to nestačí. Ve skutečnosti potřebujeme umístit #div-1a vzhledem k nadřazenému bloku #content. A v tomto okamžiku opět vstupuje do hry relativní umístění.

4. poloha: pevná

Pevné polohování (pozice: pevné), je podmnožinou absolutního polohování. Jediný rozdíl je v tom, že je vždy ve viditelné oblasti obrazovky a při posouvání stránky se nepohybuje. V tomto ohledu je to trochu jako pevný obrázek na pozadí.

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

V IE s polohou: pevná není vše tak hladké, jak bychom chtěli, ale je mnoho cest tato omezení obejít.

5. poloha:relativní + poloha:absolutní

Tím, že bloku #content umístíme relativní polohu (position: relativní), můžeme umístit libovolné podřízené prvky vzhledem k jeho hranicím. Umístíme 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 sloupce

Vyzbrojeni znalostmi z předchozích kroků si můžete zkusit vytvořit dva sloupce pomocí relativního a absolutního umístění.

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

Jednou z výhod absolutního umístění je možnost umístit prvky v libovolném pořadí, bez ohledu na to, jak jsou umístěny v označení. Ve výše uvedeném příkladu je blok #div-1b umístěn před blokem #div-1a.

A nyní byste si měli položit otázku: „Kam zmizel zbytek prvků z našeho příkladu?“. Zmizely pod absolutně umístěnými bloky. Naštěstí existuje způsob, jak to napravit.

7. Dva sloupy s pevnou výškou

Jedním z řešení je dát nádobě obsahující kolony pevnou výšku.

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

Řešení není příliš vhodné, protože nikdy předem nevíme, jaká velikost bude text ve sloupcích umístěn a jaké písmo bude použito.

8.Plovák

Pro sloupce s proměnnou výškou není vhodné absolutní umístění, proto se podívejme na jinou možnost.

Přiřazením plováku k bloku jej zatlačíme co nejvíce k pravému (nebo levému) okraji a text následující za blokem jej obtéká. Obvykle se tato technika používá pro obrázky, ale my ji použijeme na složitější úkol, protože je to jediný nástroj, který máme k dispozici.

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

9. Plovoucí sloupy

Pokud prvnímu bloku přiřadíme float: left a poté float: left druhému, každý z bloků bude přitlačen k levému okraji a dostaneme dva sloupce s proměnnou výškou.

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

Také můžete sloupcům přiřadit opačnou plovoucí hodnotu, v tomto případě budou rozmístěny podél okrajů kontejneru.

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

Nyní však máme další problém – sloupce přesahují nadřazený kontejner, čímž narušují celé rozložení. Toto je nejčastější problém začínajících návrhářů rozvržení, i když jej lze vyřešit poměrně jednoduše.

10. Vyčistěte plovák

Čištění plováku lze provádět dvěma způsoby. Pokud je za sloupci další blok, stačí k němu přiřadit clear: both.

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

Nebo přiřaďte vlastnost overflow: hidden k nadřazenému kontejneru

#content ( overflow:hidden; )

Ať tak či onak, výsledek bude stejný.

Závěr

Dnes byly zvažovány pouze základní techniky polohování a nejjednodušší příklady. Pro pomoc začínajícím designérům layoutu také vždy doporučuji sérii článků od Ivana Sagalaeva, které mi svého času velmi pomohly.

polohování css bloků jedna z nejdůležitějších fází dispozičního řešení, protože právě ta ovlivňuje adaptabilitu lokality nebo možnost její realizace v budoucnu (pokud to v tuto chvíli není požadováno), a má také významný vliv na další škálování stránka. Není neobvyklé, že „nešťastní designéři dispozičního řešení“ udělají takovou dispozici, že je nakonec jednodušší ji vyhodit, než něco změnit, ale přitom může vypadat zcela v souladu s dispozicí. Tato situace vzniká z nepochopení toho, kde a kdy použít ten či onen typ polohování. Dnes se pokusíme tento problém pochopit. A tak v css existuje vlastnost pozice. Tato vlastnost může nabývat 5 hodnot, ale budeme uvažovat 4 hlavní:

• absolutní
• statický
• relativní
• pevný

Absolutní umístění bloku (absolutní)

První, na našem seznamu, metoda umístění je absolutní. Když je tato vlastnost přiřazena, blok se sám o sobě stane jednotkou a zbytek prvků stránky neovlivňuje jeho umístění ani neovlivňuje ostatní prvky. Velikost bloku je určena vlastnostmi width a height a umístění na stránce je určeno nejvyššími vlastnostmi. vlevo, vpravo a dole tyto parametry nastavují výplň od horního, levého, pravého a spodního okraje. Pokud blok nemá nadřazený prvek a také pokud je umístění nadřazeného prvku odlišné od statického, pak vlastnosti top, left, bottom, right nastaví odsazení od začátku stránky, jinak od okrajů nadřazený prvek.

Nejčastěji se tento typ polohování používá, když je třeba blok přitlačit k pravému nebo spodnímu okraji. Zvažte toto rozložení.

Pro větší pohodlí byly bloky zvýrazněny vícebarevným rámečkem. Označení bude vypadat takto:

XHTML

Vztah ( pozice: relativní; ) .žlutá ( pozice: absolutní; vpravo: 10px; dole: 10px; )

V tomto příkladu jsme použili vlastnosti right a bottom k nastavení odsazení od pravého a spodního okraje. Tyto hodnoty vlastností jsou ekvivalentní top: Výška prvku je 10px a vlevo: Šířka prvku je 10px.

Absolutní polohování se také někdy používá, když je nutné „přeskočit“ jeden prvek na druhý.

Statické umístění (statické)

Nejběžnějším typem umístění, které se vyskytuje na každé stránce a je obvykle nastaveno pro většinu prvků, je statické, v css se zapisuje jako statické. U většiny značek HTML je tato hodnota určena ve výchozím nastavení. pokud pozice není explicitně nastavena, bude hodnota statická. Při tomto uspořádání se prvky řadí pod sebe a souřadnice v okně každého prvku závisí na nejbližších prvcích s pozicí: statickou nebo polohou: relativní. Vlastnosti nahoře, vlevo, vpravo, dole nebudou s tímto umístěním fungovat, poloha se změní kvůli vlastnosti margin.

Relativní umístění (relativní)

Tento typ umístění je velmi podobný statickému umístění, kromě toho, že polohu prvku lze změnit pomocí vlastností top, left, right, bottom a margin.

Pevné umístění (pevné)

Pevné polohování zvláštnostmi nastavení souřadnic je podobné absolutní, ale poloha se nepočítá vzhledem k HTML stránce, ale vzhledem k oknu prohlížeče, tzn. s vlastností top: 10px nastavíte horní odsazení na 10px Z OKNA PROHLÍŽEČE a bez ohledu na to, na jaké úrovni posouvání stránky se nacházíte, tento prvek bude vždy sledovat vaši obrazovku.

Obvykle se používá pro navigační prvky, aby měl uživatel vždy na očích důležité informace nebo odkazy na zajímavé stránky.

Stále nechápete, jak funguje absolutní umístění v CSS a ztrácíte prvky na obrazovce? Pojďme prozkoumat toto kouzlo.

Úvod do polohování

Když nastavíte position: absolute , do popředí se nedostane samotný prvek, ale jeho nadřazený kontejner, protože CSS je umístěno relativně k němu. Záludné na tom je, že ne vždy jde o bezprostředního rodiče prvku.

Zvažte kód se čtyřmi divy vnořenými do sebe jako panenka.

Box-1 , box-2 a box-3 jsou vycentrovány pro krásu s okrajem: auto a flex CSS vlastnosti. Blok box-4 zůstane ve výchozí pozici v toku dokumentu.

tělo ( display: flex; ) .box-1, .box-2, .box-3 ( display: flex; margin: auto; )

Všechny 4 prvky mají výchozí umístění. V tuto chvíli vypadá rozvržení takto:

K čemu se řadíme?

Aby se prvek umístil, potřebuje znát dvě věci:

• který rodič bude výchozím bodem;
• hodnotu posunutí vzhledem k referenčnímu bodu (nahoře, dole, vpravo nebo vlevo).

Pokud definujete position: absolute na box-4 , tento prvek opustí normální tok dokumentu. Nyní však zůstává na svém místě, protože souřadnice offsetu nejsou nastaveny. Pokud není šířka prvku definována v CSS, bude se rovnat šířce jeho obsahu (plus odsazení a ohraničení).

Nyní přidáme vlastnosti top: 0 a left: 0. Prvek musí určit, který nadřazený kontejner bude počátkem těchto souřadnic. Stává se nejbližším prvkem s nestatickou pozicí (nejčastěji pozice: relativní). box-4 začne dotazovat své předky jednoho po druhém. Ani box-3 , ani box-2 , ani box-1 nejsou vhodné, protože mají ve výchozím nastavení umístění v CSS (nenastaveno).

Pokud není nalezen žádný umístěný předek, prvek se umístí relativně k tělu dokumentu:

Pokud nastavíte pozici: relativní na prvku box-1, bude to referenční bod:

Absolutně umístěný prvek je umístěn vzhledem k jeho nejbližšímu umístěnému předkovi.

Jakmile je nalezen referenční bod, vše nad ním ve stromu DOM přestane mít význam.

Pokud nastavíte pozici: i vzhledem k boxu-2, pak box-4 bude umístěn relativně k němu, protože tento předek je blíže.

Podobně pro kontejner box-3: