Właściwość right
Właściwość right określa pozycję
prawej krawędzi elementu. Wartości właściwości można
zapisywać w powszechnie używanych jednostkach miary,
na przykład w pikselach, calach, punktach, procentach.
Ustawiane wartości mogą być również liczbami ujemnymi,
w tym przypadku elementy będą nakładać się jeden
na drugi. Odliczanie współrzędnych jest określane przez właściwość position,
która zwykle przyjmuje wartość relative
(pozycja względna) lub absolute
(pozycja absolutna).
Składnia
selektor {
right: rozmiar lub auto;
}
Przykład
Podczas najechania na element potomny
ustawmy pozycję jego prawej krawędzi
na 25px:
<div id="elem">
<p></p>
</div>
#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;
}
:
Przykład
A teraz podczas najechania prawa krawędź
elementu potomnego będzie ustawiona
na -50px:
<div id="elem">
<p></p>
</div>
#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;
}
:
Zobacz też
-
właściwość
bottom,
która ustawia pozycję dolnej krawędzi elementu -
właściwość
top,
która ustawia pozycję górnej krawędzi elementu -
właściwość
left,
która ustawia pozycję lewej krawędzi elementu -
pseudoelement
::backdrop,
który ustawia położenie za pierwszym elementem