The right property
The right property specifies a position
of the right edge of an element. Values for the
property can be written in common size units,
such as pixels, inches, points, percentages. The
specified values can also be negative numbers,
in this case the elements will overlap one
another. The coordinate reference is determined
by the position property, which usually
takes the relative (relative position)
value or absolute (absolute position).
Syntax
selector {
right: size or auto;
}
Example
Let's when hovering over a child element
set its right border position to
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;
}
:
Example
Now let the right border of the child
element be positioned at -50px
on hover:
<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;
}
:
See also
-
the
bottomproperty
that specifies a position of an element bottom edge -
the
topproperty
that specifies a position of an element top edge -
the
::backdroppseudo-element
that specifies a position after the first element -
the
caption-sideproperty
that specifies a position of a table header
