CSS Umiestnenia
CSS umiest?ovacie vlastnosti vám povolujú umiestni? element.
Príklady
Position:relative
Tento príklad predvádza, ako umiestni? element relatívne k jeho normálnej pozícií.
Position:absolute
Tento príklad predvádza, ako umiestni? element, pou?i?ím absolútnej hodnoty.
Position:fixed
Tento príklad predvádza, ako umiestni? element, relatívne k oknu prehliada?a.
Nastavi? tvar elementu
Tento príklad predvádza, ako nastavi? tvar elementu. Element je vystrihnutý do tohto tvaru a zobrazený.
Ako ukáza? prete?enie v nejakom elemente, pou?itím scrollu (posúvania)
Tento príklad predvádza, ako nastavi? prete?enie na vytvorenie posúvacieho scrollbaru, ak je obsah elementu príli? ve?ký na to, aby
sa zmestil do ur?eného miesta.
Ako skova? prete?enie v elemente
Tento príklad predvádza, ako nastavi? prete?enie na skovanie obsahu, ak je príli? ve?ký na to, aby
sa zmestil na ur?ené miesto.
Ako nastavi?, aby browser
sám o?etril prete?enie obsahu v elemente
Tento príklad predvádza, ako anstavi?, aby browser sám o?etril prete?enie v elemente.
Vertikálne zarovnanie obrázku
Tento príklad predvádza, ako nastavi? vertikálne zarovnanie obrázku v texte.
Z-index
Z-index sa mô?e pou?i? na vlo?enie elementu "behind" iný element.
Z-index
Elementy v príklad nad týmto majú teraz zmenené ich Z-indexy.
Nastavi? vrchný okraj
obrázku, pou?i?ím hodnoty v pixeloch
Tento príklad predvádza, ako nastavi? vrchný roh elementu, pou?itím hodnoty v pixeloch.
Nastavi?
vrchný okraj obrázku, pou?i?ím hodnoty v %
Tento prklad predvádza, ako nastavi? vrchný okraj obrázku, pou?i?ím hodnoty v %.
Nastavi? spodný okraj
obrázku, pou?i?ím hodnoty v pixeloch
Tento príklad predvádza, ako nastavi? spodný roh elementu, pou?itím hodnoty v pixeloch.
Nastavi? spodný okraj obrázku, pou?i?ím hodnoty v %
Tento prklad predvádza, ako nastavi? spodný okraj obrázku, pou?i?ím hodnoty v %.
Nastavi? ?avý okraj obrázku, pou?i?ím hodnoty v pixeloch
Tento príklad predvádza, ako Nastavi? ?avý okraj obrázku, pou?i?ím hodnoty v pixeloch.
Nastavi? ?avý okraj obrázku, pou?i?ím hodnoty v %
Tento prklad predvádza, ako nastavi? ?avý okraj obrázku, pou?i?ím hodnoty v %.
Set the
Nastavi? pravý okraj obrázku, pou?i?ím hodnoty v pixeloch
Tento príklad predvádza, ako nastavi? pravý okraj obrázku, pou?i?ím hodnoty v pixeloch.
Nastavi? pravý okraj obrázku, pou?i?ím hodnoty v %
Tento prklad predvádza, ako nastavi? pravý okraj obrázku, pou?i?ím hodnoty v %.
CSS Vlastnosti Umiest?ovania
CSS umiest?ovacie vlastnosti vám povolujú zada? ?avú, pravú. vrchnú a spodnú
pozíciu elementu. Povoluje vám to aj nastavi? tvar elemente, polo?i? element
za iný element a ur?i?, ?o by sa malo sta?, ak je obsah elementu príli? ve?ký, aby sa zmestil do ur?eného miesta.
Podpora prehliada?a: IE: Internet Explorer, F: Firefox, N: Netscape.
W3C: ?íslo vo "W3C" st?pci indikuje, pre ktoré CSS odporú?anie
je vlastnos? definovaná (CSS1 alebo CSS2).
| Vlastnos? |
Popis |
Hodnoty |
IE |
F |
N |
W3C |
| bottom |
Nastaví, ako ?aleko je spodný okraj elementu nad/pod spodným okrajom
rodi?ského elementu |
auto
%
length |
5 |
1 |
6 |
2 |
| clip |
Nastaví tvar elementu. Element je vystrihnutý do tohto tvaru a zobrazený |
shape
auto |
4 |
1 |
6 |
2 |
| left |
Nastaví, ako ?aleko je ?avý okraj elementu napravo/na?avo od ?avého okraju
rodi?ovského elementu |
auto
%
length |
4 |
1 |
4 |
2 |
overflow
|
Nastaví, ?o sa stane, ako obsah elementu prete?ie jeho miesto |
visible
hidden
scroll
auto |
4 |
1 |
6 |
2 |
| position |
Vlo?í element do statickej, relatívnej, absolútnej alebo fixnej pozícií |
static
relative
absolute
fixed |
4 |
1 |
4 |
2 |
| right |
Nastaví, ako ?aleko je pravý okraj elementu na?avo/napravo od
pravého okraju rodi?ovského elementu |
auto
%
length |
5 |
1 |
6 |
2 |
| top |
Nastaví, ako ?aleko je vrchný okraj elementu nad/pod vrchným okrajom
rodi?ovského elementu |
auto
%
length |
4 |
1 |
4 |
2 |
| vertical-align |
Nastaví vertikálne zarovnanie elementu |
baseline
sub
super
top
text-top
middle
bottom
text-bottom
length
% |
4 |
1 |
4 |
1 |
| z-index |
Nastaví poradie elementu |
auto
number |
4 |
1 |
6 |
2 |
|