Eigenschap left

De eigenschap left bepaalt de positie van de linkerrand van een element. Waarden voor de eigenschap kunnen worden opgegeven met algemeen aanvaarde maateenheden, bijvoorbeeld in pixels, inches, punten, procenten. De opgegeven waarden kunnen ook negatieve getallen zijn, in dat geval zullen elementen over elkaar heen worden geplaatst. De coördinatenberekening wordt bepaald door de eigenschap position, die meestal de waarde relative (relatieve positionering) of absolute (absolute positionering) aanneemt.

Syntaxis

cssselector {
  left: grootte of auto;
}

Voorbeeld

Laten we bij het hoveren over een kindelement de positie van de linkerrand instellen op 25px:

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;
}

Результат:

Voorbeeld

En laten we nu bij het hoveren de linkerrand van het kindelement positioneren op -50px:

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;
}

Результат:

Zie ook