CSS bottom property
Set the bottom edge of the image, 0px and 5px above the bottom edge of the element:
img.ex1
{
position:absolute;
bottom:0px;
}
img.ex2
{
position:relative;
bottom:-100px;
}
Try it out . . .
Description of property definition and use
For absolutely positioned elements, the bottom property is set above/below the bottom edge of the element containing it.
For relatively positioned elements, the bottom property sets the bottom edge of an element in units higher/lower than its normal position.
Note: If "position:static," the bottom property has no effect.
Description: Auto for static elements, absolute length for length values, specified values for percentage values, or auto for otherwise. For relatively defined elements, if both bottom and top are auto, the calculated values are 0, if one of them is auto, the opposite number of the other value, and if neither is auto, bottom will take the opposite number of top values.
| Default: | auto |
|---|---|
| Inheritance: | no |
| Version: | CSS2 |
| JavaScript syntax: | object .style.bottom="50px" |
Browser support
The numbers in the table support the first browser version number of the property.
| Attributes | |||||
|---|---|---|---|---|---|
| bottom | 1.0 | 5.0 | 1.0 | 1.0 | 6.0 |
The property value
| Value | Describe |
|---|---|
| auto | The default. The bottom position is calculated from the browser. |
| % | Sets the bottom edge position as a percentage of the contained elements. Negative values can be used. |
| length | Use units such as px, cm to set the bottom position of an element. Negative values can be used. |
| inherit | Specifies that the value of the bottom property should be inherited from the parent element. |
Related articles
CSS tutorial: CSS Positioning