Proprietatea right

Proprietatea right stabilește poziția margini drepte a elementului. Valorile pentru proprietate pot fi scrise cu unități de măsură general acceptate, de exemplu, în pixeli, inci, puncte, procente. Valorile setate pot fi și numere negative, în acest caz, elementele se vor suprapune unul peste altul. Numărătoarea inversă a coordonatelor este determinată de proprietatea position, care de obicei ia valoarea relative (poziție relativă) sau absolute (poziție absolută).

Sintaxă

cssselector {
  right: dimensiune sau auto;
}

Exemplu

Să setăm pentru elementul copil la hover o poziție a marginii drepte egală cu 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;
}

Результат:

Exemplu

Și acum să fie marginea dreaptă a elementului copil la hover poziționată la -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;
}

Результат:

Vezi și

  • proprietatea bottom,
    care stabilește poziția marginii de jos a elementului
  • proprietatea top,
    care stabilește poziția marginii de sus a elementului
  • proprietatea left,
    care stabilește poziția marginii stângi a elementului
  • pseudoelementul ::backdrop,
    care stabilește poziționarea după primul element