Umístění objektů do html. Umístění (zarovnání) prvků bloku v CSS

Poslední aktualizace: 28.04.2016

CSS poskytuje možnosti umístění prvků, což znamená, že můžeme umístit prvek na konkrétní místo na stránce.

Hlavní vlastností, která ovládá umístění v CSS, je vlastnost position. Tato vlastnost může nabývat jedné z následujících hodnot:

static : standardní umístění prvku, výchozí hodnota

absolutní : prvek je umístěn vzhledem k hranicím prvku kontejneru, pokud jeho vlastnost position není statická

relativní : Prvek je umístěn relativně ke své výchozí poloze. Hlavním účelem relativního umístění obvykle není přesunout prvek, ale vytvořit nový kotevní bod pro absolutní umístění jeho vnořených prvků.

pevné : prvek je umístěn vzhledem k oknu prohlížeče, což vám umožňuje vytvářet pevné prvky, které při rolování nemění polohu

Na prvek byste neměli současně aplikovat vlastnost float a jakýkoli jiný typ umístění než statický (tj. výchozí typ).

Absolutní umístění

Zobrazovací oblast prohlížeče má horní, spodní, pravý a levý okraj. Každá z těchto čtyř hran má odpovídající vlastnost CSS: left, right, top a bottom. Hodnoty těchto vlastností jsou specifikovány v pixelech, ems nebo procentech. Není nutné nastavovat hodnoty pro všechny čtyři strany. Zpravidla se nastavují pouze dvě hodnoty - odsazení od horního okraje nahoře a odsazení od levého okraje vlevo.

AHOJ SVĚTE

Absolutně umístěný div zde bude 100 pixelů vlevo od okraje výřezu a 50 pixelů zdola.

Není tak důležité, aby po tomto prvku div byly nějaké další prvky. Tento blok div bude v každém případě umístěn relativně k hranicím výřezu prohlížeče.

Pokud je prvek s absolutním umístěním umístěn v jiném kontejneru, který má naopak hodnotu vlastnosti position nerovnající se static , pak je prvek umístěn relativně k hranicím kontejneru:

Relativní umístění

Relativní umístění je také specifikováno pomocí relativní hodnoty. Pro určení konkrétní pozice, do které je prvek posunut, se použijí stejné vlastnosti nahoře, vlevo, vpravo, dole:

vlastnost z-index

Ve výchozím nastavení, když dva prvky mají stejné ohraničení, prvek, který je naposledy definován v html značce, se zobrazí nad druhým. Vlastnost z-index vám však umožňuje změnit pořadí prvků, když jsou překryty. Vlastnost bere jako hodnotu číslo. Prvky s vyšší hodnotou z-indexu se zobrazí nad prvky s menší hodnotou z-indexu.

Například:

Nyní přidáme nové pravidlo do stylu bloku redBlock:

RedBlock( z-index: 100; pozice: absolutní; nahoře: 20px; vlevo:50px; šířka: 80px; výška: 80px; barva pozadí: červená; )

Zde je z-index 100. Ale nemusí to být číslo 100. Vzhledem k tomu, že druhý blok má nedefinovaný z-index a je ve skutečnosti nulový, pro redBlock můžeme nastavit vlastnost z-index na libovolnou hodnotu větší než nula.

A nyní bude první blok překrývat druhý, a ne naopak, jak tomu bylo na začátku.

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

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

V CSS styly se tomu říká umístění (pozice), který může být obyčejný (statický), relativní (relativní) a absolutní (absolutní).

Relativní umístění v CSS

Na relativní umístění, blok se posune vzhledem ke své původní poloze. Nicméně po zapsání do bloku:

Pozice: relativní;

nic se nestane, zůstane na místě. A souřadnicový systém posune blok (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 blokově relativní. V normálním toku červený blok překrývá žlutý, protože je zapsán jako poslední v kódu.

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

Po registraci poloha: relativní, objasníme, že počet je relativní k jeho aktuální pozici.

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

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

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

Pokud odstraníte z kódu poloha: relativní, pak blok zůstane na místě. Co když 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 dosáhne spodního okraje prohlížeče. A to nebylo součástí našich plánů.

Absolutní umístění v CSS

Na obrázku je blok absolutně umístěný, to je, když se souřadnicový systém počítá od okraje prohlížeče, nahrazením jediného slova jsme změnili polohu bloku.

Pozice: absolutní;

Je tu jedna zvláštnost. Absolutní umístění ovlivňuje také inline prvky. Pokud je zadán vložený prvek pozice: absolutní, pak se bude chovat jako bloková. 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 být umístěn pryč od rodiče.

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

Blokově žlutá (
poloha: relativní;
odsazení: 10px;
barva pozadí: #ffe70f;
}

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

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

Pevné umístění

Při rolování stránky blok s poloha: pevná, zůstane na místě, tato metoda se obvykle používá k opravě navigační lišty.

z-index

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

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

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

Jednou z nejlepších věcí na CSS je, že styly nám dávají možnost umístit obsah a prvky na stránku téměř jakýmkoliv představitelným způsobem. To dodává našemu návrhu strukturu a pomáhá tomu, aby byl obsah vizuálnější.

V CSS existuje několik různých typů umístění, každý z těchto typů má svůj vlastní rozsah. V této kapitole se podíváme na několik různých případů použití – vytváření opakovaně použitelných rozvržení a jedinečné umístění jednorázových prvků – a popíšeme několik metod, jak toho dosáhnout.

Polohování pomocí plováku

Jedním ze způsobů umístění prvků na stránku je vlastnost float. Tato vlastnost je poměrně univerzální a lze ji využít mnoha různými způsoby.

Vlastnost float v podstatě vezme prvek, odebere ho z normálního toku stránky a umístí jej vlevo nebo vpravo od jeho nadřazeného prvku. Všechny ostatní prvky na stránce se kolem takového prvku zalomí. Odstavce se například obtékají kolem obrázku, pokud prvek je nastavena vlastnost float.

Když je vlastnost float aplikována na více prvků najednou, umožňuje vytvořit rozvržení s plovoucími prvky vedle sebe nebo naproti sobě, jak je znázorněno na rozvržení s více sloupci.

Vlastnost float nabývá několika hodnot, z nichž dvě nejoblíbenější jsou left a right, které umožňují prvku plout vlevo nebo vpravo od svého rodiče.

Img ( plovoucí: vlevo; )

plavat v praxi

Vytvořme obecné rozložení stránky se záhlavím nahoře, dvěma sloupci uprostřed a zápatím dole. V ideálním případě by tato stránka měla být označena prvky