CSS vlastnost left urΦuje x-ovou sou°adnici pozicovanΘho prvku neboli posunutφ doprava.
| hodnoty | x-sou°adnice levΘho okraje prvku |
|---|---|
| dΘlka | lev² okraj prvku je vzdßlen dΘlku doprava od levΘho okraje omezujφcφho prvku |
| procento% | lev² okraj prvku je vzdßlen procento ╣φ°ky omezujφcφho prvku od levΘho okraje omezujφcφho prvku |
| auto | prvek mß lev² okraj na tom mφst∞, kde by ho m∞l, kdyby nebyl pozicovßn |
Pouze pro prvky s position: absolute nebo position: relative, tj. pro pozicovanΘ prvky. Omezujφcφ prvek je bu∩to cel² dokument, nebo jin² nad°azen² prvek s position: absolute nebo position: relative. Doleva se posouvß zßpornou hodnotou.
Internet Explorer od verze 4, Netscape Navigator od verze 4 s chybami, Mozilla a Opera v╣ude (zdroj: vlastnφ zku╣enosti).
| Prohlφ╛eΦ | Podpora ve verzφch | Poznßmka |
|---|---|---|
| 4, 5, 5.5, 6 | MP uvßdφ u verzφ 4.0 a 5.0 problΘmy | |
| Mozilla (Netscape 6+) | v╣echny verze | |
| Opera | 5, 6, 7 | |
| Konqueror | ano | |
| IE 5 / Mac | ano | |
| Netscape Navigator 4 | s chybami |
Vych²lenφ prvku z jeho pozice se dß d∞lat relativnφ pozicφ. Nap°φklad budu mφt obrßzek, kter² chci ╣oupnout doleva o 100 pixel∙. Proto╛e ╣oupu doleva, hodnota vlastnosti left bude zßpornß:
<img src="nakres.gif" style="width: 390px; height: 189px; position: relative; left: -100px">
Vlastnost left se Φast∞ji pou╛φvß v kombinaci s absolutnφ pozicφ. Nap°φklad Φast²m modelem je pozicovanß hlaviΦka, menu a hlavnφ text:
#hlavicka, #menu, #text {position: absolute}
#hlavicka {top: 0px; left: 10px}
#menu {top: 80px; left: 10px}
#text {top: 80px; left: 160px}
kde html zßpis vypadß asi takhle:
<div id="hlavicka">text hlaviΦky ...</div>
<div id="menu">odkazy menu ... </div>
<div id="text">hlavnφ text strßnky ... bla bla bla</div>
Zobrazit tento p°φklad na left a position.
P°φklad sloupcovΘho designu pozicovßnφm
Design pomocφ vlastnosti overflow
Ukßzka absolutnφho pozicovßnφ a filtru matrix
CSS pozicovßnφ, primitivnφ p°φklad
Position = zp∙sob poΦφtßnφ pozice, Top = sou°adnice shora, Right = sou°adnice zprava
CSS pozicovßnφ, Design pomocφ CSS pozicovßnφ
o tvorb∞, ·dr╛b∞ a zlep╣ovßnφ internetov²ch strßnek