Left-ominaisuus

Ominaisuus left asettaa elementin vasemman reunan sijainnin. Ominaisuuden arvot voidaan kirjoittaa yleisesti hyväksytyillä mittayksiköillä, esimerkiksi pikseleinä, tuumina, pisteinä, prosentteina. Asetettavat arvot voivat olla myös negatiivisia lukuja, tässä tapauksessa elementit asettuvat päällekkäin. Koordinaattien laskenta määräytyy ominaisuuden position perusteella, joka yleensä saa arvon relative (suhteellinen sijainti) tai absolute (absoluuttinen sijainti).

Syntaksi

cssvalitsija {
  left: koko tai auto;
}

Esimerkki

Asetetaan lapsielementille vasemman reunan sijainti arvoksi 25px kun kursorilla viitataan siihen:

html<div id="elem">
  <p></p>
</div>

css#elem {
  width: 400px;
  height: 300px;
  border: 1px solid black;
}
p {
  position: relative;
  width: 100px;
  height: 100px;
  border: 1px solid red;
  margin-left: 50px;
}
p:hover {
  left: 25px;
  width: 100px;
  height: 100px;
  border: 1px solid red;
}

Результат:

Esimerkki

Asetetaan nyt lapsielementin vasen reuna sijaintiin -50px kun kursorilla viitataan siihen:

html<div id="elem">
  <p></p>
</div>

css#elem {
  width: 400px;
  height: 300px;
  border: 1px solid black;
}
p {
  position: relative;
  width: 100px;
  height: 100px;
  border: 1px solid red;
  margin-left: 50px;
}
p:hover {
  left: -50px;
  width: 100px;
  height: 100px;
  border: 1px solid red;
}

Результат:

Katso myös