bottom

style.css

/* Automatic positioning (default) */
div.test { bottom: auto;}

/* Position 50px from the bottom */
div.test1 { bottom: 50px;}

/* Position 10% of the containing block height from the bottom */
div.test2 { bottom: 10%;}

/* Negative value: extend beyond the bottom edge */
div.test3 { bottom: -20px;}

/* Fixed to the bottom of the screen (footer, SNS buttons, etc.) */
.fixed-footer {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
}

/* Absolute positioning at the bottom of the parent */
.parent { position: relative;}
.child-bottom {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
}

/* Sticky element anchored to the bottom */
.sticky-bottom {
	position: sticky;
	bottom: 20px;
}

The 'bottom' property in the samples below is applied to a div element inside a div with 'position: relative' (red-bordered element), which acts as the reference.

<div style="position: relative; border: solid 1px #f00; width: 300px; margin: 50px auto;">
	<div style="bottom: 50px; position: relative; background-color: #ff0; width: 300px; height: 300px; opacity: 0.7;">A 300px × 300px div with 'bottom: 50px' and 'position: relative'.</div>
</div>

<div style="position: relative; border: solid 1px #f00; width: 300px; margin: 400px auto 50px;">
	<div style="bottom: 50px; position: absolute; background-color: #ff0; width: 300px; height: 300px; opacity: 0.7;">A 300px × 300px div with 'bottom: 50px' and 'position: absolute'. The parent height becomes 0 since it cannot calculate this element's height.</div>
</div>

Desktop

Chrome

1+ ○

Firefox

1+ ○

Safari

1+ ○

Edge

12+ ○

IE

11 ○

10 ○

9 ○

8 ○

7 ○

6 ○

Opera

6+ ○

5 and earlier ×

Mobile

iOS Safari

1+ ○

Android Browser

4.4+ ○

3 and earlier ×

Chrome Android

Latest ○

Same support as desktop

Firefox Android

Latest ○

Same support as desktop

※ Version data based on MDN.

Specifies the distance from the bottom edge of the reference position. The 'bottom' property only takes effect when the 'position' property is set to a value other than 'static'.

The reference position changes depending on whether 'position' is 'relative', 'absolute', or 'fixed'.

When 'position' is 'relative', 'bottom' specifies the distance from the bottom edge of where the element would normally be in the document flow.

When 'position' is 'absolute' or 'fixed', 'bottom' specifies the distance from the bottom edge of the containing block.

When set to 'auto', the remaining vertical distance calculated from the 'top' property value is automatically used. If both 'bottom' and 'top' are 'auto', no position change occurs. 'auto' is the initial value.

Note: 'top' and 'bottom' both control the same vertical axis, just as 'left' and 'right' control the horizontal axis. You do not need to specify both. If you do, 'top' and 'left' take precedence.