English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
The bottom CSS property specifies the offset of the bottom edge of the positioned element from the bottom of the containing block or the browser window.
ForAbsolutely positionedelements, the bottom attribute specifies the distance that the bottom edge of the element box is offset above the bottom edge of the containing block.
ForRelatively positionedFor the element, the bottom attribute specifies the offset of the bottom edge of the element box from the bottom edge of the box itself (i.e., the box is given a position in the normal flow, and then offset from this position according to these properties).
The following table provides usage instructions and version history of this attribute, as well as its usage syntax in JavaScript scripts.
Default Value: | auto |
---|---|
Applies To: | Positioned Element |
Inheritance: | No |
Animatable: | Yes.Please refer to Animation Attribute. |
Version: | CSS 2,3 |
JavaScript Syntax: | object.style.bottom="50px" |
The syntax of this attribute is as follows:
bottom: length | percentage | auto | initial | inherit
The following example demonstrates how to use the bottom attribute.
p { position: absolute; bottom: 150px; }Test and see‹/›
The following table describes the value of this attribute.
Value | Description |
---|---|
length | Specify the offset as a length value in units such as px, pt, cm, em, etc. Negative length values are allowed. |
percentage | Specify a percentage offset. The percentage is calculated relative to the height of the element's containing block. Negative percentage values are allowed. |
auto | Browser calculates the bottom edge position. This is the default value. |
initial | Set this attribute to its default value. |
inherit | If specified, the associated element adopts the bottom attribute value of its parent element. |
Browser Compatibility of bottom Attribute, the numbers in the table below represent the minimum version number of browsers that support this attribute; all mainstream browsers support this attribute.
|
Please refer to the following tutorials:CSS Position (position),CSS Layer.