The top property
The top property specifies a position
of the top 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 {
top: size or auto;
}
Example
Let's when hovering over a child element
set its top 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-top: 50px;
margin-left: 50px;
}
p:hover {
top: 25px;
width: 100px;
height: 100px;
border: 1px solid red;
}
:
Example
Now let the top 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;
margin-top: 50px;
width: 100px;
height: 100px;
border: 1px solid red;
margin-left: 50px;
}
p:hover {
top: -50px;
width: 100px;
height: 100px;
border: 1px solid red;
}
:
See also
-
the
bottomproperty
that specifies a position of an element bottom edge -
the
leftproperty
that specifies a position of an element left edge -
the
rightproperty
that specifies a position of an element right edge -
the
::backdroppseudo-element
that specifies a position after the first element -
the
caption-sideproperty
that specifies a position of a table header
