Caution

JavaScript is disabled in your browser.
This site uses JavaScript for features such as search.
For the best experience, please enable JavaScript before browsing this site.

CSS Dictionary

bottom

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'.

Sample Code

div.test { bottom: auto;}
div.test1 { bottom: 50px;}
div.test2 { bottom: 10%;}

Available Values

Value	Description
auto	Positions the element based on the calculated value from the 'top' property. If 'top' is also 'auto', no position change occurs. This is the initial value.
Number	Specifies the distance as a number. When 'position' is 'relative', it is the distance from the bottom edge of the element's normal flow position. When 'absolute', it is the distance from the bottom edge of the containing block. Units such as 'px' and '%' can be used. When '%' is used, it is relative to the containing block's height.

Browser Preview

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>

Browser Support

Desktop

Chrome

1+ ○

Firefox

1+ ○

Safari

1+ ○

Edge

12+ ○

Supported in all versions

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.

Overview

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.

If you find any errors or copyright issues, please contact us.

Home