bottom (CSS property)
| IE7+ | FF1+ | Saf1.3+ | Op9.2+ |
|---|---|---|---|
| Full | Full | Full | Full |
| Inherited | Initial | Version |
|---|---|---|
| No | auto |
CSS2 |
Example
This style rule makes the element
with ID "logo" generate a relatively positioned box
that’s shifted ten pixels upward:
#logo {
position: relative;
bottom: 10px;
}Description
For absolutely positioned boxes, this property specifies how far the bottom margin edge of the box is offset above the bottom padding edge of its containing block.
For relatively positioned boxes, this property specifies how far the bottom edge of the box is offset above the position it would have had in the normal flow.
If both top and
bottom have a value other than
auto, bottom is
ignored.
Compatibility
| IE | 5.5 | Buggy |
|---|---|---|
| 6.0 | Buggy | |
| 7.0 | Full | |
| Firefox | 1.0 | Full |
| 1.5 | Full | |
| 2.0 | Full | |
| Safari | 1.3 | Full |
| 2.0 | Full | |
| 3.0 | Full | |
| Opera | 9.2 | Full |
| 9.5 | Full |
Internet Explorer for Windows versions up to and including 6:
- compute percentage values on the basis of the height of the parent block, rather than of the containing block
- are one pixel off when
bottomandrightare used to specify the position, and the offset is an odd number of pixels don’t support the specification of both the position and the dimensions of an absolutely positioned element using
top,right,bottom, andlefttogether; they’ll use the last vertical and horizontal position specified, and need the dimensions to be specified usingwidthandheight
Internet Explorer for Windows versions up to and
including 7 don’t support the value inherit.
User-contributed notes
There are no comments yet.
Add a note
To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.
