Set the bottom edge of an element relative to its normal position (relative positioning) or relative to the bottom edge of its container (absolute or fixed positioning)
Syntax bottom: length | percentage | auto | inherit ;
Length - A positive number will move the element up, a negative number down.
percentage - Set the bottom edge position as a percentage of the containing element. Negative values are allowed.
Auto - Let the browser calculate the bottom edge position.
inherit - inherit from the parent element.
If a bottom value is applied to an element with a Absolute or Fixed position, it will be placed relative to the bottom of the document (or non-static parent element.)
If both a top and bottom value are applied to a relatively positioned element, only the top value will be honored.
An alternative (CSS3 only) is to use transform translate() that will "nudge" the element from it's current position which is perfect for moving an item; adding motion; rather than setting its initial position.
Examples:
h1 { position: relative; bottom: 25px; }
.emw3class { position: absolute; bottom: -2em; }
#emw3id { position: relative; bottom: 25pt; }
Try it:
This is a sample of text with a CSS border. The border helps to display the position of the text DIV. |
Browser Support: CSS 2 supported in all major browsers.
“Happiness makes up in height what it lacks in length” ~ Robert Frost
Related:
bottom - MDN Web Docs.
top - Top position of a positioned element.
left - Left position of a positioned element.
right - Right position of a positioned element.
transform translate(), translateX(), translateY() - Apply a 2D or 3D transformation to an element. CSS3.
position - Positioning method for an element (static, relative, absolute or fixed).