Příklady pozic CSS. CSS - Polohování prvků bloku. Funkce práce s pozicí v různých prohlížečích

Prvek bloku v HTML je prvek, který ve výchozím nastavení zabírá celou šířku. nadřazený prvek. 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. Polohování blokové prvky nazývá proces jejich umístění v okně prohlížeče a relativní přítel s pomocí CSS vlastnosti poloha , vlevo , nahoře , vpravo a dole . Vlastnost CSS position je navržena tak, aby nastavila jednu ze čtyř dostupné typy polohování: statické (výchozí), absolutní, pevné a relativní. Odpočinek Vlastnosti CSS, jmenovitě left , top , right a bottom jsou určeny k určení vzdáleností vzhledem k levé, horní, pravé a spodní okraj rodičovský prvek. Prvky bloku se také mohou při nastavování určitých vlastností vzájemně překrývat a tuto příležitost totéž lze použít 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 další blok(například: červená) se nachází s nový řádek. Toto umístění také není ovlivněno nastavením vzdáleností vlevo, nahoře, vpravo a dole.

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

Na absolutní umístění Poloha prvku se nastavuje vzhledem k okrajům okna prohlížeče pomocí vzdáleností určených vlastnostmi left , top , right a bottom. Pokud určíte vzdálenosti vlevo a vpravo ve stejnou dobu a jsou ve vzájemném rozporu, pak je dána přednost vlevo , totéž platí pro horní a dolní , ve kterých vyšší prioritu má vzdálenost nahoře. Absolutní polohování se často používá ve spojení s relativním polohováním pro účely návrhu, když je nutné umístit různé prvky vzhledem k sobě, lze také použít k vytvoř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 blokovou polohu lze však vytvořit také pomocí vlastnosti okrajů(odrážky).

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:

A vlevo umožňují odsadit umístěný prvek vzhledem ke konkrétní hraně. Níže uvedený příklad uvažuje možné typy umístění prvku:

1. poloha : relativní (relativně umístěný prvek). Když je použita vlastnost left, umístěný prvek je posunut vzhledem k jeho aktuální poloze ( záporná hodnota posouvá prvek doleva, kladná hodnota doprava). Na příklad vlevo: 200px;
2. poloha : absolutní (absolutně umístěný prvek). Při použití vlastnosti left je umístěný prvek posunut vzhledem k levému okraji svého předka (záporná hodnota posune prvek doleva, kladná hodnota posune prvek doprava) a předek musí mít hodnotu pozice odlišné od výchozího - static , jinak bude počítání vztaženo k levému okraji okna prohlížeče (stejně jako u pozice s pevnou ). Použití vlevo jako příklad: 40px.
3. poloha : pevná (prvek s pevným polohováním). Při použití vlastnosti left je umístěný prvek posunut vzhledem k levému okraji okna prohlížeče (záporná hodnota posune prvek doleva, kladná hodnota posune prvek doprava). Použití vlevo jako příklad: 40px.
4. position : static (staticky umístěný prvek - toto je výchozí). Hodnota vlastnosti left neovlivní umístění prvku.

Více podrobné informace Informace o umístění prvků získáte v CSS tutoriálu v článku.

Podpora prohlížeče

Vlastnictví			Opera		IExplorer	Okraj
pozice	1.0	1.0	4.0	1.0	7.0	12.0

Syntaxe CSS:

pozice: "statický | absolutní | pevný | relativní | počáteční | zdědit";

Syntaxe JavaScriptu:

Object.style.position = "absolutní"

Hodnoty majetku

Význam	Popis
absolutní	Absolutní umístění. Při offsetu je prvek posunut vzhledem k určené hraně svého předka a předek musí mít hodnotu pozice jinou než výchozí - static , jinak bude počet relativní k určenému okraji okna prohlížeče (jako u pozice: opraveno).
opraveno	Pevné umístění. Při odsazení se prvek posune vzhledem k určenému okraji okna prohlížeče.
statický	Statické polohování. Prvky se zobrazují v pořadí, v jakém se objevují v toku HTML dokument. Toto je výchozí hodnota.
relativní	Relativní umístění. Při odsazení je prvek posunut vzhledem k jeho aktuální poloze.
	Nastaví vlastnost na výchozí hodnotu.
	Označuje, že hodnota je zděděna z nadřazeného prvku.

CSS verze

CSS2

Zděděno

Žádný.

Animovatelné

Žádný.

Příklad použití

h1(pozice:statický;)

Tento příklad používá pro demonstrační účely všechny možné typy polohování – statické, relativní, absolutní a pevné. Výsledek našeho příkladu.

Dobrý den, milí čtenáři tohoto blogu. Dnes budeme mluvit o principech polohování HTML prvky pomocí CSS Pravidla umístění (s absolutními, relativními a pevnými hodnotami) a vlastnosti, které určují odsazení vlevo, vpravo, nahoře a dole. Vidíte hvězdu v levém dolním rohu? Po přečtení článku až do konce zjistíte, jak se tam dostal.

V minulém článku jsme hovořili o jednom ze zásadních, který pomáhá rozbít normální tok po sobě jdoucích HTML kód značky. Umožňuje vám implementovat, na kterém je nyní stavba webu převážně založena. Ale ne sám Float...

Pozice relativní - relativní polohování

Existuje také pozice, která má na starosti umístění značek pomocí tabulek kaskádové styly a také umožňuje přerušit normální tok. V pochopení bude toto pravidlo trochu složitější než dříve diskutovaný plovák, ale myslím, že to zvládneme.

Má čtyři možné hodnoty(statický | relativní | absolutní | pevný). Jak to můžeme vědět? No, samozřejmě, ze specifikace, která je zveřejněna na oficiálních stránkách:

Výchozí hodnota je poloha: statická. Tito. v normálním toku mají dvě pravidla CSS, která to mohou porušit, výchozí hodnoty static a float:none. Jakmile se jedna z těchto hodnot změní, normální tok HTML kódu na tomto místě bude narušen, protože nyní může tato značka interagovat se svými sousedy zcela jiným způsobem nebo dokonce neinteragovat vůbec.

Začneme relativním umístěním, které bude odpovídat hodnotě poloha: relativní. Poté, co jej zaregistrujeme pro značku, budeme mít možnost nastavit offset (pozici) pro tento prvek pomocí doplňkového pravidla Vlevo, vpravo, nahoře a dole(vlevo, vpravo, nahoru a dolů, v tomto pořadí):

Výchozí pro všechny čtyři je Auto. Když píšeme pro jakýkoli tag poziční pravidlo: relativní, pak se hodnoty odsazení na všech stranách vynulují a máte možnost je nastavit sami.

Je potřeba pochopit jak se nastavují odrážky. Například vlevo: 400px znamená odsazení z levé strany doprava o odpovídající velikost a nahoře: 100px znamená od horní strany dolů. Pokud zadáte záporné hodnoty pro Left, right, top a bottom, prvek se bude pohybovat opačným směrem (například nahoře je nahoře a Left je vlevo).

Podívejme se na použití relativního na plovoucím prvku. Předpokládejme, že máme dva kontejnery Div, které pro názornost zabarvíme různé barvy pozadí pomocí .

Nejprve učiníme první kontejner plovoucí doleva pomocí odpovídající vlastnosti a od bude prázdný, pak jej dáme (a odsazení pomocí okraje):

V důsledku toho dostaneme něco jako tato olejomalba:

První kontejner podle očekávání plave doleva. Přitom druhý blok sám o sobě jako by si toho nevšiml (protože ano), ale všimne si toho vložený prvek text, který obtéká náš plovoucí blok.

Nyní přidáme k CSS pravidla pro první pozici kontejneru: relativní a nastavte levý a horní okraj pomocí Vlevo a nahoře:

V důsledku toho uvidíme, že se náš plovoucí prvek posunul podle zadaných okrajů:

Všimněte si, že text stále obtéká, jako by stále stál na místě. Tito. Při konstrukci mnoha Html tagů berou v úvahu, že jsou na svém správném místě (bez zohlednění posunů vlevo a nahoře, které jsme nastavili v pravidlech).

Ne všechny tagy to ale udělají, jinak bychom se nedočkali žádných změn. Nejbližší předek se svitkem(v našem případě to bude Html tag, tedy vlastně zobrazovací plocha) tyto změny budou zaznamenány.

Princip fungování relativního není složitý, ale není zcela jasné, proč jej lze v praxi využít. Ve skutečnosti se toto pravidlo používá ve spojení s pozicí absolutní, a v této podobě nachází velmi skvělá aplikace. Ale nejdřív.

Absolutní pozice - absolutní umístění v CSS

Pojďme se podívat na absolutní umístění. Nejjednodušší způsob, jak se na toto pravidlo CSS začít dívat, je názorný příklad. Řekněme, že uvnitř kontejneru Div máme inline tag Span, kterému nastavíme absolutní umístění.

Nejprve se však podívejme na tuto konstrukci bez přidání „pozice: absolutní“. Zároveň k ní pro zdůraznění linie Span přidáme výšku, která se stejně nepoužije a tentokrát přidáme CSS kód, pro změnu nikoli přes konstrukt Head:

<stylový typ="text/css"> #abs( background:#FFC0C0; margin-left: 100px; ) #abs span( background:#C0FFC0; height:100px; )

Pro Div jsme také nastavili levý okraj na 100px. Nyní se podívejme, co se změní, pokud dáme našemu tagu Span line absolutní pozici přidáním Absolutní pravidla pozice CSS:

#abs span( background:#C0FFC0; height:100px; position:absolute; )>

Stalo se něco zvláštního. Soudě podle skutečnosti, že vlastnost height:100px byla aplikována na Span, přestala být malá značka. Pak se očividně fragmenty „první“ a „třetí“ k sobě připojily, jako by mezi nimi prvek se slovem „druhý“ již neexistoval. Přesně tak funguje absolutní umístění v CSS.

Podívejme se ale na vše bod po bodu při nastavování vlastnosti prvku "pozice: absolutní":

1. Značka, pro kterou je toto pravidlo určeno, se stane značkou bloku
2. Rozměry tohoto bloku budou určeny obsahem, který obsahuje (pokud je výslovně nenastavíte pomocí pomocí šířky a výška).

Stejně jako u plovoucích prvků (se specifikací Float), pokud je na tag aplikováno „position: absolute“, efekt Margin-colloapse se u těchto tagů neobjeví. Tito. nikdo mu nemůže dát své vertikální okraje a také je nebude moci nikomu převést (s nikým nesdílí vertikální odsazení).

Pokud si pamatujete předchozí článek ze sekce „“, uvidíte, že při vytváření plovoucích prvků pomocí Float byly dodrženy všechny tyto tři body.

Pokud tedy byl pro značku již nastaven Float, ale pak pro ni bylo zadáno „position: absolute“, pak první z nich prohlížeč resetuje (je zodpovědný za analýzu kódu) na Žádný (výchozí hodnota), protože nemá smysl implementovat dva stejné modely.

3. Značka se zadanou „position: absolute“ neinteraguje s žádnými jinými prvky kódu Html kromě svého bezprostředního rolovacího rodiče. Všechny ostatní značky v kódu si jednoduše nevšimnou prvku s absolutní pozicí (a to je vidět z našeho příkladu)

To vše je dobré, ale s pomocí „absolutna“ musíme provést absolutní umístění. No, vlastně, tohle je vlastně pravda. V kombinaci s ním můžeme použít stejná čtyři pravidla CSS: Vlevo, vpravo, nahoře a dole. Jak budou pracovat s absolutním umístěním?

Stále nastaví posun, ale posun již není vzhledem k aktuální poloze prvku, ale vzhledem k hranicím jeho kontejneru.

A samotný koncept kontejner pro absolutně umístěné prvky se bude lišit od obecně uznávaného. Z předchozích článků si asi pamatujete, že kontejner pro Html tag je zobrazovaná oblast a pro všechny ostatní je oblast obsahu rodiče. To nebude případ značky s absolutní pozicí.

Při absolutním polohování budeme moci kontejner přiřadit sami (bude to první z předků, který má hodnota pozice se liší od statické, používá se ve výchozím nastavení).

Řekněme, že pokud nastavíme pouze absolutní umístění, ale nezadáme žádné hodnoty pro pravidla Left, Right, Top a Lower, pak se pro ně použije výchozí hodnota Auto a takový prvek zůstane na svém místě (jako v náš poslední snímek obrazovky). Zde by mělo být vše jasné.

CSS používá strukturu ancestor-child, o které jsem již psal dost podrobně v článku o . Naším úkolem při definování kontejneru pro značku s absolutní pozicí bude najít předka s pozicí, která má jinou hodnotu než statickou (tj. když byla explicitně specifikována).

V našem příkladu žádný z předků Značka Span pozici jsme nespecifikovali, takže jsme dosáhli úplně vrcholu ( HTML tag) tam se zastavíme. Nastavíme nulové odsazení pro příklad diskutovaný výše a ujistěte se, že máme pravdu:

#abs span( pozadí:#C0FFC0; výška:100px; pozice:absolutní; vlevo:0; nahoře:0; )>

V důsledku toho se absolutně umístěný štítek přitlačil nulový bod referenční oblast zobrazení. Ale sami jsme svobodní vyberte kontejner pro prvek se zadanou absolutní pozicí. Jak to lze udělat?

Kombinace absolutní a relativní pozice v rozložení Div

Proč k tomu nepoužít pravidlo CSS „pozice: relativní“. Pojďme to zaregistrovat požadovaný štítek předchůdce (který se nakonec stane kontejnerem pro absolutně umístěný prvek) a nebude specifikovat hodnoty Left, right, top nebo bottom, čímž ve skutečnosti neprovede vůbec žádné změny polohy tohoto předka (to zůstane v normálním toku), ale přiřadí jeho kontejner a začátek zprávy pro naše absolutní umístění.

Pokud pro značku Body zadáme „relative“, náš obrázek se mírně změní:

Vidíte, objevily se charakteristické prohlubně, které indikují, že levý horní roh značky Body je nyní považován za výchozí bod. Pamatujte, že výchozí hodnoty pro tuto značku jsou: odsazení okrajů na 8 pixelech, což je to, co pozorujeme:

Nyní, kromě toho, co jsme již udělali, zapišme „position: relativní“ pro kontejner Div, uvnitř kterého žije značka Span:

Jak vidíme, obraz se změnil. Navzdory skutečnosti, že relativní je specifikováno pro Body i Div, stal se Div kontejnerem pro absolutně umístěné Span, protože on je první předek, jehož hodnota pozice je jiná než statická.

Navíc, pokud napíšeme také , pro náš Div uvidíme, že obsahová oblast s těmi stávajícími bude použita jako kontejner pro absolutní umístění odsazení:

#abs( background:#FFC0C0; margin-left: 100px; position: relativní; border:12px tečkované #ccf; padding:20px; )

Jak je vidět z příkladu, referenční bod je umístěn vlevo horní roh uvnitř rámu prvku (podél jeho vnitřního okraje). Z toho plyne pravidlo, že u značek s „position: relativní“ (což jsou kontejnery s absolutním umístěním) by bylo lepší rámeček nepoužívat vůbec, aby se předešlo excesům.

Odsazení (odsazení) Vlevo, vpravo, nahoře a dole lze nastavit nejen v absolutní jednotky(čtěte o ), ale také v procentech, které se budou brát ze šířky (vlevo a vpravo) a výšky (nahoře a dole) výsledného kontejneru. Tito. "top:100%" bude odpovídat 100% výšky kontejneru a "left:100%" bude odpovídat 100% jeho šířky.

A byla to právě výše popsaná interakce, kterou jsem měl na mysli, když jsem mluvil kombinace absolutní a relativní polohy. Díky tomu máme možnost sami si vybrat kontejner, nebo jinak řečeno výchozí bod pro absolutní polohování. Proč se tento odkaz používá v praxi?

K realizaci podobného úkolu, jako je např. nebo tzv. Litebox pro zobrazení fotografie v plné velikosti, mohou tento princip využít.

Tito. pokud potřebujete na stránce tvoří vzhled a skrývání prvku, která, když se objeví, neovlivní všechny ostatní značky (interaguje s nimi). V tomto případě nebude vzhled absolutně umístěného bloku znamenat trhání a restrukturalizaci celé webové stránky.

Pro rozevírací nabídku udělejte něco jako následující. Když najedete kurzorem myši (nastaveným v CSS pomocí ) na položku kořenové nabídky, objeví se absolutně umístěný prvek s „absolutní“ (vnořené položky nabídky vytvořené na základě ). Tento rozevírací seznam se zobrazí vedle položky kořenové nabídky z jednoduchého důvodu, že je v něm uvedena poloha: relativní. Vše.

Pozice pevná – přichycení k výřezu

Poslední způsob polohování je "pozice: pevná". Dříve diskutované metody byly navrženy tak, aby byly umístěny relativně k jakémukoli prvku HTML kódu. Pokud ale začneme stránku posouvat, pak se její značky (i ty s absolutním nebo relativním umístěním) posunou nahoru (nebo dolů).

Ale při použití pevné se to již nestane. Takto umístěný prvek bude ve výřezu vždy na stejné pozici, bez ohledu na rolování webové stránky. S takovými možnostmi jste se již pravděpodobně na webových stránkách setkali. Například docela práce je založena na podobném efektu. populární plugin pro WordPress s názvem .

U tagu se zadanou pozicí:fixed nikdo kontejner nehledá, protože je to samotný výřez. To je přesně ten rozdíl od „absolutního“ a všechno ostatní je stejné. Bloky s pevným umístěním se při posouvání stránky chovají, jako by byly prvky rozhraní okna vašeho prohlížeče (jsou vždy po ruce).

Tímto způsobem jsou implementovány například panely nástrojů, rozbalovací panely s možností zanechat zpětnou vazbu atd. věci. Jako příklad na této stránce Nastavil jsem pozici: pevná pro malý obrázek v levém dolním rohu obrazovky (výřez):

To je pro dnešek vše, v příštím článku si povíme o , který je použitelný pouze pro již umístěné prvky kódu, tzn. pro které jsou určeny buď pevné, relativní nebo absolutní.

Ať se vám daří! Brzy se uvidíme na stránkách blogu

Na další videa se můžete podívat na

");">

Mohlo by vás to zajímat

Umístění pomocí Z-indexu a pravidla kurzoru CSS pro změnu kurzoru myši
Plovoucí a jasné v CSS - nástroje blokové rozložení
Styl seznamu(typ, obrázek, pozice) - CSS pravidla konfigurovat vzhled seznamy v HTML kódu
Zobrazit (blok, žádný, vložený) v CSS – nastavte typ HTML zobrazení prvky na webové stránce
Proč potřebujete CSS, jak jej propojit kaskádové tabulky styly do HTML dokument a základy syntaxe tohoto jazyka

Vlastnictví pozice má následující významy
statický relativní absolutní opraveno
Ve spojení s ním jsou použity pouze vlastnosti (kromě pozice: static;)
nahoře dno právo vlevo
Může být přítomen současně
okraj transformovat plovoucí (kromě polohy: absolutní; a polohy: pevné;)

Přidat prázdný štítek před div s class="primer" - .

Zavedení

Prvky na webové stránce zabírají určité množství místa. Analogicky s loděmi ve hře" Námořní bitva Mezi loděmi by měly být prázdné buňky – okraj.

Chcete-li umístit jeden prvek na druhý, musíte nastavit zápornou hodnotu pro okraj. Pak se ale obsah značek bude vzájemně překrývat. Pomocí pozice a vlastností se zdá, že jsou povýšeny na úroveň 2.

V přirozeném pořadí jsou spodní značky v kódu zobrazeny nad horními značkami. Díky z-indexu na úrovni 2 si můžete sami definovat viditelný prvek.

Statické polohování - poloha: statická;

position: static je výchozí a přepisuje relativní, absolutní a pevné. Hodnoty vlastností nahoře, dole, vpravo, vlevo jsou ignorovány. Pokud neexistuje žádná transformace, z-index se nebere v úvahu.

Relativní polohování - poloha: relativní;

Blok, kterému přiřadíme pozici: relativní, bude mít přednost. Obsah spodního prvku je skrytý.

Aby bylo možné umístit blok B na B, ale pod A, nestačí přiřadit pozici: vzhledem k němu, protože v kódu je pod blokem A, což znamená, že jej bude překrývat.

Musíte také nastavit z-index prvku B tak, aby byl menší než u bloku A.

Místo okraje pro relativní umístění je někdy lepší použít vlastnosti nahoře, dole, vpravo, vlevo. Výchozím bodem pro ně je výchozí poziciživel. Současně se blok B nadále umisťuje, jako by blok A byl na stejném místě - ponechává pro něj prázdný prostor. Proto nemusíte dělat žádná kouzla s prázdnou div().

Úplná analogie s nemovitostí

Pro inline prvky

Vestavěný okrajové prvky neposouvá se nahoru a dolů (). Pouze nahoře, dole

nebo

B A B

Absolutní a pevné polohování

Zdálo by se, že blok s pozicí: absolutní by měl být umístěn nad pozicí: relativní, ale není tomu tak, platí zde přirozený řád. To znamená, že z-index vám umožní vybrat mezi nimi prioritní prvek.

Blok B ignoruje počáteční polohu bloku B, protože s pozicí: absolutní a polohou: pevný prvek přestane ovlivňovat sousední tagy buď svou šířkou/výškou, nebo float: left.

Konečný stůl

charakteristické vlastnosti	poloha: statická;	poloha: relativní; transform: translate();	pozice: absolutní;	poloha: pevná;
překrytí	Je lepší nepokládat prvky na sebe	prvky mají prioritu viditelnosti před statickými. Ostatní významy jsou ekvivalentní. Viditelný bude ten, kdo je v kódu níže nebo má skvělá hodnota z-index
referenční bod nahoře, vpravo, dole a vlevo	ignoroval	počáteční pozice prvku	okraj nadřazeného prvku	okraj okna prohlížeče
prvky kolem	vzít v úvahu aktuální situaciživel	vzít v úvahu výchozí polohu prvku	ignorovat pozici prvku
šířka: 100 %; toto je šířka	prvek (pro vložený)/nadřazený prvek (pro blokovou úroveň)		nadřazený prvek s pozicí, která není nastavena na statickou	okno prohlížeče
při rolování prvku stránky	se pohybuje			"přilepí" na určené místo v okně prohlížeče

Nyní, chcete-li materiál konsolidovat, klikněte na tlačítka na začátku článku a přemýšlejte o tom, proč k takovým změnám došlo.

Vlastnost pozice je všestranná a výkonná vlastnost. Umožňuje instalaci popř přeměna pozice prvku a obsahuje čtyři možné hodnoty:

• statický (výchozí)
• relativní
• absolutní
• opraveno

Často se používá spolu se čtyřmi vlastnostmi souřadnic:

• vlevo
• právo
• dno

statický

Toto je hodnota pozice výchozí: Statické prvky jednoduše sledují přirozený tok. Jakékoli hodnoty vlevo, vpravo, nahoře nebo dole nemají žádný vliv.

relativní

Když je nastavena poloha poměrně, prvek se vůči němu může pohybovat aktuální pozici.

Jakmile jsme schovali loď, Jah mě vzal do džungle a brzy jsme vyšli na úzkou, vyšlapanou cestu.

Spěchal jsem nahoru a z posledních sil jsem se snažil dosáhnout Jahovy ruky, ale sitik přitáhl kopí k sobě takovou silou, že se vytrhlo z rukou mezopa, která málem spadla z útesu, a já, stále lpějící na kopí. hřídel, letěl dolů, přímo do otevřené tlamy šelmy.

Už začal utíkat a za pochodu máchal těžkým kopím.

P (ohraničení: 1px plná modrá; )

Přesuneme druhý odstavec:

Druhá ( pozice: relativní; barva okraje: červená; vlevo: 20 pixelů; nahoře: 10 pixelů; )

Červený odstavec se posunul o 20 pixelů zleva právo a 10 pixelů od horního okraje dolů ohledně něj přírodní pozici, kde on spoléhal být.

Všimněte si, že modré odstavce se vůbec nepohnuly. Pomocí relativního umístění se může červený odstavec volně pohybovat, aniž by narušoval rozvržení. Jediné, co se hýbe z místa, je samotný prvek. Všechny ostatní prvky nevím, že se prvek pohnul.

absolutní

Když je nastavena poloha absolutně, prvek se může pohybovat relativně první umístěný předek.

Umístěný? Co je to umístěný prvek?

Umístěný prvek je prvek, jehož hodnota pozice je nastavena na relativní, absolutní nebo pevnou. Pokud tedy pozice není nastavena staticky, pak prvek umístěno.

Charakteristika umístěno prvkem je, že může fungovat jako referenční body pro své děti.

Představme si jednoduchou hierarchii:

Jsem umístěn relativně.

Jsem absolutně na místě!

Sekce ( pozadí: zlatá; výška: 200px; odsazení: 10px; pozice: relativní; /* Transformuje

do výchozího bodu pro

*/ ) p ( pozadí: limetková; barva: bílá; výplň: 10px; pozice: absolutní; /* Má

Volně pohyblivé */ dole: 10px; /* 10px dole */ vlevo: 20px; /* zbývá 20 pixelů */ )

Žlutá sekce má výšku 200px a umístění je nastaveno na relativní , čímž se změní na referenční bod pro všechny podřízené prvky.

Zelený odstavec je umístěn absolutně a může se volně pohybovat poměrněžlutá sekce. Nastavením vlevo i dole na hodnoty, my pojďme se pohnout to v levém dolním rohu.

Co se stane, když nastavíme doleva a doprava současně?

Pokud není šířka specifikována, použijte levou: 0 a pravou: 0 roztáhne prvek na celou šířku. Toto je ekvivalent nastavení vlevo: 0 a šířky: 100 % .

Pokud je nastavena šířka, pak se hodnota right zahodí.

opraveno

Když je poloha nastavena na pevnou , chová se jako absolutní: Můžete nastavit levé/pravé a horní/dolní souřadnice.

Jediný rozdíl je v tom referenčním bodem je zobrazovací okno. To znamená, že pevný prvek se nehýbe se stránkou, on opraveno na obrazovce.