Umístění HTML. Umístění prvků HTML

Prvek bloku v HTML je prvek, který ve výchozím nastavení zabírá celou šířku svého nadřazeného prvku. Nadřazeným prvkem může být jiný prvek bloku nebo okno prohlížeče. Pomocí vlastností CSS můžete nastavit šířku a výšku prvku bloku. Umístění prvků bloku je proces jejich umístění v okně prohlížeče a relativně k nim pomocí vlastností CSS position, left, top, right a bottom. Vlastnost CSS position je určena k nastavení jednoho ze čtyř dostupných typů umístění: statické (výchozí), absolutní, pevné a relativní. Zbývající vlastnosti CSS, konkrétně left , top , right a bottom , slouží k nastavení vzdáleností vzhledem k levému, hornímu, pravému a spodnímu okraji nadřazeného prvku. Také se při nastavování určitých vlastností mohou prvky bloků vzájemně překrývat a tuto funkci lze využít i na webových stránkách.

Výchozí umístění (statické)

Pokud jste neurčili polohu pro prvek bloku nebo nezadali static , což je totéž, prvky bloku jsou uspořádány v pořadí. Navíc je další blok (například: červený) umístěn na novém řádku. Toto umístění také není ovlivněno nastavením vzdáleností vlevo, nahoře, vpravo a dole.

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

Při absolutním umístění je poloha prvku určena vzhledem k okrajům okna prohlížeče pomocí vzdáleností určených vlastnostmi left , top , right a bottom. Pokud zadáte vzdálenosti vlevo a vpravo současně a jsou ve vzájemném konfliktu, pak má přednost vlevo , totéž platí pro horní a dolní , kde má přednost vzdálenost nahoře. Absolutní polohování se velmi často používá ve spojení s relativním polohováním pro účely návrhu, kdy je potřeba umístit různé prvky vůči sobě, lze jej také použít pro vytváření rozbalovacích nabídek, rozložení webu atd.

Pevné umístění

Pevné umístění se liší od ostatních typů umístění a při posouvání stránky se nepohybuje s obsahem. Prvky bloku s pevnou pozicí jsou ukotveny pomocí vlastností left , top , right a bottom k okrajům okna prohlížeče. Pevné umístění se používá k vytvoření rozhraní rámců (okno prohlížeče je rozděleno do několika oblastí), pevné menu, pevné zápatí webu a „trvalé“ bloky (seznam odkazů, sociální tlačítka atd.).

Relativní umístění

Relativní umístění je určeno určením vzdáleností vlevo , nahoře , vpravo a dole vzhledem k aktuální poloze.

Tuto pozici bloku lze ale také vytvořit pomocí vlastnosti margin.

Relativní polohování není zábavné používat samo o sobě, většinou se používá ve spojení s absolutním polohováním.

Zvažme možnosti:

Pomocí CSS positioningu můžete umístit prvek přesně tam, kam chcete na stránce. Spolu s plováky (viz lekce 13) vám polohování dává skvělé příležitosti k vytvoření přesných a sofistikovaných návrhů.

V této lekci probereme následující:

Principy CSS Positioning

Představme si okno prohlížeče jako souřadnicový systém:

Principy polohování CSS spočívají v tom, že rámeček můžete umístit kamkoli v souřadnicovém systému.

Řekněme, že chceme umístit titulek. Při použití krabicového modelu (viz lekce 9) vypadá záhlaví takto:

Pokud jej chceme umístit 100 pixelů od horní části dokumentu a 200 pixelů zleva, musíme zadat následující kód CSS:

H1 ( poloha:absolutní; nahoře: 100px; vlevo: 200px; }

Zde je výsledek:

Jak můžete vidět, CSS Positioning je velmi přesná technika při umisťování prvků. Je to mnohem jednodušší než používat tabulky, průhledné obrázky nebo něco podobného.

Absolutní umístění

Prvek umístěný absolutně neobdrží v dokumentu žádný prostor. To znamená, že po umístění nezanechává žádné prázdné místo.

Pro absolutní umístění prvku musí mít vlastnost position hodnotu absolutní. Můžete použít hodnoty vlevo, odjet, že jo, horní A dno k umístění krabice.

Jako příklad absolutního umístění umístíme do rohů dokumentu 4 pole:

#box1 ( poloha:absolutní; nahoře: 50px; vlevo: 50px; ) #box2 ( poloha:absolutní; nahoře: 50px; vpravo: 50px; ) #box3 ( poloha:absolutní; dole: 50px; vpravo: 50px; ) #box4 ( poloha:absolutní; dole: 50px; vlevo: 50px; )

Relativní umístění

Chcete-li umístit prvek relativně, nastavte vlastnost position na relativní. Rozdíl mezi relativním absolutním umístěním je způsob výpočtu umístění.

Poloha prvku, který je umístěn vzhledem k vypočítané vzhledem k jeho původní poloze v dokumentu. To znamená, že prvek posouváte doprava, doleva, nahoru nebo dolů. Prvek tedy po umístění stále zabírá místo v dokumentu.

Jako příklad relativního umístění zkusme umístit tři obrázky vzhledem k jejich původnímu umístění na stránce. Všimněte si, že kresby po přesunutí ponechaly v dokumentu na svých původních pozicích prázdné místo.

Jste stále zmateni tím, jak funguje absolutní umístění v CSS, a ztrácíte prvky na obrazovce? Pojďme pochopit 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 umístění v CSS je vůči němu relativní. Potíž je v tom, že to není vždy bezprostřední rodič prvku.

Podívejme se na kód se čtyřmi divy vnořenými do sebe jako hnízdící panenka.

< body > < div class = "box-1" > < div class = "box-2" > < div class = "box-3" > < div class = "box-4" > < / div > < / div > < / div > < / div > < / body >

Pole box-1 , box-2 a box-3 jsou pro krásu vycentrovány pomocí vlastností margin: auto a flex CSS. 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; )

tělo ( displej: flex; Box-1, Box-2, Box-3 ( displej: flex; Marže: auto;

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

.box-4 bez polohování

Proti čemu se stavíme?

Aby se prvek umístil, musí znát dvě věci:

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

Pokud definujete pozici: absolutní pro 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 specifikovány. Pokud není šířka prvku definována v CSS, bude se rovnat šířce jeho obsahu (plus odsazení a ohraničení).

.box-4 s absolutním polohováním bez offsetu

Nyní přidáme vlastnosti top: 0 a vlevo: 0 . Prvek musí určit, který nadřazený kontejner se stane referenčním bodem pro tyto souřadnice. Stává se jím nejbližší prvek s nestatickou pozicí (nejčastěji pozice: relativní). box-4 začíná vyslýchat své předky jednoho po druhém. Ani box-3, ani box-2, ani box-1 nejsou vhodné, protože mají výchozí umístění v CSS (nenastaveno).

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

.box-4 s absolutním polohováním. Nadřazené prvky bez umístění

Pokud nastavíte pozici: vzhledem k prvku box-1, stane se referenčním bodem:

.box-4 s absolutním polohováním. .box-1 s relativním umístěním

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: relativní i pro box-2 , pak box-4 bude umístěn relativně vůči němu, protože tento předek je blíže.

.box-4 s absolutním polohováním. .box-2 s relativním umístěním

Podobně pro kontejner box-3:

Jak už asi víte, web můžete rozložit pomocí tabulek, v takovém případě je stránka rozdělena na buňky. Pro tyto účely můžete také použít bloky, když se webová stránka skládá z jednotlivých prvků.

Asi se nespletu, když řeknu, že vážným problémem mnoha začínajících webmasterů je úkol umístit bloky na dané místo webové stránky.

Jedním z hlavních problémů při rozvržení pomocí bloků je umístění (zarovnání) těchto stejných bloků.

Něco málo o vrstvách

Myslím, že mnozí z vás slyšeli o něčem takovém, jako je vrstva. Vrstva je zpravidla chápána jako blok určený tagem