jednotky - pozicování

přehledy jsem nevymyslel a jsou dle předlohy

Orientační přehled převodu
Značka	Název	Převod	Počet px
mm	milimetr	milimert	1mm = 3.78px
cm	centimetr	1cm = 10mm	1cm = 37.8px
in	palec (inch)	1in = 2,54cm	1in = 96px
pt	typografický bod	72pt = 1in	3pt = 4px *
pc	pica nebo též cicero	1pc = 12pt , 6pc = 1in	1pc = 16px

Relativní jednotky
Značka	Název	Význam
em	eM, čtverčík	výška jednoho řádku základního písma.
ex	eX	výška malého písmena x
rem	kořenové eM	výška jednoho řádku úplně základního typu písma

Já používám px a % a nějak mi to stačí, můj oblíbenec je px

Pozicování: (cokoliv, kamkoliv) není třeba více komentovat
tag align	top	right	center	left	bottom	self

position:absolute toto je velice silný nástroj zadám hodnotu osy X a Y v px a doslova přibiju element kam chci a zůstane tam kam ho nadefinuju
třeba: h5 { position: absolute; left: 190px; top: 150px; }
...no stejně si to všechno otestujte jinak nebudete vědět o čem je řeč ...

If the margin property has four values. !padding je stejný a nebudu to překládat
•margin: 25px 50px 75px 100px;
◦top margin is 25px
◦right margin is 50px
◦bottom margin is 75px
◦left margin is 100px

If the margin property has three values: •margin: 25px 50px 75px;
◦top margin is 25px
◦right and left margins are 50px
◦bottom margin is 75px

If the margin property has two values: •margin: 25px 50px;
◦top and bottom margins are 25px
◦right and left margins are 50px

If the margin property has one value: •margin: 25px;
◦all four margins are 25px

Absolutní a relativní Existují dva naprosto odlišné druhy pozicování.
absolute: pozice umístí objekt do stránky na udané souřadnice bez ohledu na okolní text.
relative: pozice naproti tomu určuje pouze, o kolik se má objekt posunout oproti své normální poloze. TOP a LEFT (+/- px), používám to celkem často

fixed: fixuje oddil do souřadnic a zůstane tam bez ohledu na rolování .

Zarovnávání bloků, často prováděné pomocí konstrukcí typu tabulka v tabulce, je často zmiňováno jako jedna z hlavních potíží formátování s CSS. Trápí mnoho z těch, kteří chtějí předělat své stránky do čisté struktury pouze s CSS. Je ale nutno podotknout, že CSS jsou velmi mohutný nástroj a mnoho funkcí je v nich ukryto bez povšimnutí. S kaskádovými styly lze docílit lecčeho, jediným omezením může být pouze nedostatečná či dokonce špatná implementace CSS v prohlížečích. Zarovnávat musíme vždy něco vůči něčemu - potřebujeme tedy alespoň dva prvky, abychom o nějakém vzájemném zarovnávání mohli mluvit. Obecně si můžeme rozdělit zarovnání na dvě skupiny: dva sousedící prvky a jeden prvek uvnitř druhého

Pokud má i vnitřní blok danou výšku, zbývající prostor spočítáme a vhodně nastavíme horní a dolní padding vnějšího bloku. Pokud je ale tato výška automatická a pokud víme, že vnější prvek je dostatečně vysoký, můžeme vnitřní prvek ve volném prostoru umístit relativním pozicováním. Procentní hodnota top vnitřního prvku se už bude odkazovat na výšku tohoto obalu (tedy vlastně na svoji vlastní výšku, protože jsou stejné). Pokud mu dáme position:relative a top:-50%, posune se o polovinu své výšky nahoru. Jeho střed se dostane na střed vnějšího prvku. Bude-li mít vnitřní prvek position:relative a top:50%, jeho horní hrana bude posunuta přesně do poloviny výšky vnějšího prvku. to je hukot :)

Z-index:

Z-index funguje pouze u pozicovaných prvků, to jest u těch, které mají vlastnost position nastavenu na absolute, relative nebo fixed, jde o prioritu překrývání. dle hodnot:
auto: prvek je nahoře, pouze pokud je v kódu později
číslo: čím vyšší, tím blíže je ke čtenáři a překrývá ostatní vrstvy záporné číslo: podsouvá se pod jiné vrstvy.
...position:absolute;top:5px;
left:5px; z-index:-15; ..img src...
!bacha: nejprve se tomu vyhnu a pak to opatrně otestuju!

fixed:

potkali jste, baner nebo cokoliv co s váma cestovalo po celé stránce ? Pak tento prvek byl pozicován jako fixed definuju X,Y a zafixuju pak tam zůstane a bude otravovat na svém místě, bez ohledu na cokoliv.

praxe ukázka: {margin: 0px auto;} = horizontální cetrování, vertikála je 0 nahoru i dolu leva a prava je automatika takže rovnoměrné.