CSS Reference Property

bottom 535i5l

The bottom property is an offset property that is used to specify the bottom offset of a positioned element with respect to its positioning context. 1a6se

It is one of four available offset properties that also include left.

Offset properties are used to specify the exact position value other than the default static.

The bottom property specifies how far an absolutely positioned element’s bottom margin edge is offset above (or below) the bottom edge of the element’s positioning context, which is usually its containing block. For relatively positioned elements, the offset is with respect to the bottom edge of the element itself (i.e., the element is given a position in the normal flow, then offset from that position according to the offset properties). For fixed and sticky elements the positioning context is the viewport.

You should read the position property entry for details on how to choose a position for an element to use the offset properties on it.

If an element has a specified top property is set along with the bottom property, the element will stretch so that its top and bottom edges are positioned according to the top and bottom offsets.

Official Syntax 55184y

Syntax:
```
bottom: <length> | <percentage> | auto
```
Initial: auto
Applies To: positioned elements
Animatable: yes, as a length, percentage or calc();

Values 584j31

<length>

The bottom offset is specified as a fixed length. See the <length> entry for a list of possible length values and units.

Negative values are allowed. A positive value will offset the element upwards from the bottom edge of its positioning context, while a negative value will offset it downwards with respect to the bottom edge of the context.

<percentage>

The bottom offset is specified as a percentage of its containing block’s height. See the <length> entry for a list of possible length values and units.

auto

When bottom is set to auto then:

If the element is relatively positioned, it will be positioned (vertically) according to the value of the right.)
If the element is absolutely positioned, it will be positioned (vertically) according to the value of the height is height: auto, it will get its height based on its content.

Notes z5jo

The bottom offset property also accepts a value of inherit, which allows the element to inherit its bottom offset from its parent. The element’s parent may not be its positioning context.

Examples 3e5p5z

The following example offsets an absolutely positioned element by 30px above the bottom edge of its containing block (which in this case is its positioning context).

.container {
    position: relative; /* establishes a positioning context for its absolutely positioned descendants and for itself */
}

.absolutely-positioned {
    position: absolute;
    bottom: 30px;
}

Live Demo 2x4j2k

Have a look at some examples in the following live demo:

View this demo on the Codrops Playground

Browser k5t66

The bottom property is ed in all major browsers: Chrome, Firefox, Safari, Opera, Internet Explorer, and on Android and iOS.

Referencia de CSS3 325u2m