CSS pozicování
Blokový model v CSS
Blokový model v CSS horizontální rozměry
Blokový model v CSS vertikální rozměry
CSS pozicování
- 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
- 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
- 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
Vlastnosti boxů
margin
| 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 |
padding
| 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 |
border
| Atribut | Možné hodnoty | Popis |
|---|---|---|
| border-top: | border-width border-style border-color | nastavení vlastností horní části rámečku |
| border-right: | border-width border-style border-color | nastavení vlastností pravé části rámečku |
| border-bottom: | border-width border-style border-color | nastavení vlastností spodní části rámečku |
| border-left: | border-width border-style border-color | nastavení vlastností levé části rámečku |
| border: | komplexní nastavení vlastností rámečku |
Ostatní
| 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, % | šířka |
| 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 |