Right häsiýeti

Right häsiýeti elementiň sag gyrasynyň ýerleşişini kesgitleýär. Häsiýet üçin bahalar göni ölçeg birlikleri bilen ýazyp bolýar, mysal üçin, piksel, dýuým, punkt, göterim ýaly. Berilýän bahalar otrisatel sanam bolup bilýär, bu ýagdaýda elementler bir-biriniň üstüne düşer. Koordinatalaryň hasaby position häsiýeti bilen kesgitlenýär, ýöne adatda relative (göreli ýerleşiş) ýa-da absolute (absolýut ýerleşiş) bahasyny alýar.

Sintaksis

cssselektor {
  right: ölçeg ýa-da auto;
}

Mysal

Geliň, çaga elementiniň üstüne gelende onuň sag serhediniň ýerleşişini 25px deň kesgitleýäli:

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 {
  right: 25px;
  width: 100px;
  height: 100px;
  border: 1px solid red;
}

Результат:

Mysal

Indi bolsa, üstüne gelende çaga elementiniň sag serhedi -50px ýerleşsin:

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 {
  right: -50px;
  width: 100px;
  height: 100px;
  border: 1px solid red;
}

Результат:

Şeýle-de görüň

  • bottom häsiýeti,
    elementiň aşaky gyrasynyň ýerleşişini kesgitleýär
  • top häsiýeti,
    elementiň ýokarky gyrasynyň ýerleşişini kesgitleýär
  • left häsiýeti,
    elementiň çep gyrasynyň ýerleşişini kesgitleýär
  • ::backdrop psewdolement,
    biriniň yzky elementinden soňky ýerleşişi kesgitleýär