bottom property
The bottom property specifies a position
of the bottom 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 {
bottom: number with units or auto;
}
Example
Let's when hovering over a child element
set its bottom 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;
}
p:hover {
bottom: 25px;
width: 100px;
height: 100px;
border: 1px solid red;
}
:
Example
Now let the bottom 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-top: 50px;
}
p:hover {
bottom: -50px;
width: 100px;
height: 100px;
border: 1px solid red;
}
:
See also
-
the
topproperty
that specifies a position of an element top 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