Свойство right

Свойството right задава позицията на десния край на елемента. Стойности за свойството могат да бъдат записани с общоприетите мерни единици, например в пиксели, инчове, точки, проценти. Задаваните стойности могат да бъдат и отрицателни числа, в този случай елементите ще се наслагват един върху друг. Отброяването на координатите се определя от свойството position, което обикновено приема стойност relative (относително позициониране) или absolute (абсолютно позициониране).

Синтаксис

cssселектор {
  right: размер или auto;
}

Пример

Нека при посочване на дъщерния елемент да зададем неговата позиция на десния край равна на 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 {
  right: 25px;
  width: 100px;
  height: 100px;
  border: 1px solid red;
}

Результат:

Пример

А сега нека при посочване десният край на дъщерния елемент да бъде позициониран на -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 {
  right: -50px;
  width: 100px;
  height: 100px;
  border: 1px solid red;
}

Результат:

Вижте също

  • свойство bottom,
    което задава позицията на долния край на елемент
  • свойство top,
    което задава позицията на горния край на елемент
  • свойство left,
    което задава позицията на левия край на елемент
  • псевдоелемент ::backdrop,
    който задава позициониране след първия елемент