CSS pozicování

Toto je starší verze dokumentu!

→ Slide 1

→ Slide 2

→ Slide 3

→ Slide 4

→ Slide 5

Pomocí CSS pozicování lze jakýkoliv objekt (obrázek, tabulka, text, cokoliv) umístit kamkoliv na stránku.
S objekty lze posouvat a mohou se překrývat.
Existují dva naprosto odlišné druhy pozicování.
- Absolutní pozice
- Relativní pozice

↓ Slide 6

Absolutní pozice umístí objekt do stránky na udané souřadnice bez ohledu na okolní text.
- počítá se od levého horního rohu
- ```
 position: absolute; left: 5px; top: 5px 
```

Relativní pozice určuje pouze, o kolik se má objekt posunout oproti své normální poloze.
- počítá se od předchozího bloku
- ```
position: relative; left: 5px; top: 5px
```

↓ Slide 7

top - určuje posunutí objektu směrem dolů
left - určuje posunutí objektu směrem doprava
Pro posouvání nahoru a doprava se nepoužívá down a right, nýbrž top a left se zápornými hodnotami.
Protože při přesouvání objektů může dojít k překrytí objektu, existuje vlastnost určující, který objekt bude navrchu. Ta vlastnost se jmenuje z-index a dosahuje hodnot celých čísel. Přitom vyšší číslo znamená vyšší pozici při překrývání.
Plovoucí objekty - float: left | right

→ Slide 8

↓ Slide 9

Atribut	Možné hodnoty	Popis
margin-top:	délka; %; auto	velikost horního okraje
margin-right:	délka; %; auto	velikost pravého okraje
margin-bottom:	délka; %; auto	velikost spodního okraje
margin-left:	délka; %; auto	velikost levého okraje
margin:		komplexní nastavení velikosti okrajů: nahoře vpravo dole vlevo

↓ Slide 10

Atribut	Možné hodnoty	Popis
padding-top:	délka; %	velikost vnitřního horního okraje
padding-right:	délka; %	velikost vnitřního pravého okraje
padding-bottom:	délka; %to	velikost vnitřního spodního okraje
padding-left:	délka; %	velikost vnitřního levého okraje
padding:		komplexní nastavení velikosti vnitřního okrajů: nahoře vpravo dole vlevo

↓ Slide 11

Atribut	Možné hodnoty	Popis
border-top:	border-width border-style border-color	initial	inherit;	nastavení vlastností horní části rámečku
border-right:	border-width border-style border-color	initial	inherit;	nastavení vlastností pravé části rámečku
border-bottom:	border-width border-style border-color	initial	inherit;	nastavení vlastností spodní části rámečku
border-left:	border-width border-style border-color	initial	inherit;	nastavení vlastností levé části rámečku
border:		komplexní nastavení vlastností rámečku

↓ Slide 12

Atribut	Možné hodnoty	Popis
border-color:	barva	barva rámečku
border-style:	none, dotted, dashed, solid, double, groove, ridge, inset, outset	none, dotted, dashed, solid, double, groove, ridge, inset, outset
width:	auto, délka, %
height:	auto, délka,	šířka
float:	left, right, none	left, right=plovoucí objekt (např. obrázek),none=normální objekt
clear:	left, right, none, both	čekání na skončení plovoucích elementů: left=vlevo, right=vpravo, both=na obou stranách

Blokový model v CSS