Left

CSS vlastnost left určuje x-ovou souřadnici pozicovaného prvku neboli posunutí doprava.

left
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.

Podpora

Internet Explorer od verze 4, Netscape Navigator od verze 4 s chybami, Mozilla a Opera všude (zdroj: vlastní zkušenosti).

Podpora vlastnosti left
Prohlížeč Podpora ve verzích Poznámka
Internet Explorer 4, 5, 5.5, 6 MP uvádí u verzí 4.0 a 5.0 problémy
Firefox všechny verze  
Opera 5, 6, 7  
Chrome ano  

Příklady

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.

Další příklady

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

Vystředění prvku pomocí absolutní pozice

 

Reklama

www.webhosting-c4.cz, webhosting s doménou v ceně. 20GB
o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

CSS kurz Přehled hodnot Vlastnosti CSS příklady

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.