CSS bottom Property (original) (raw)

Last Updated : 11 Jul, 2025

The **CSS bottom property affects the vertical position of a positioned element. This property does not affect non-positioned elements. It controls an element's vertical distance from the bottom edge of its containing element using units like pixels, percentages, or keywords (auto, initial, inherit).

CSS bottom Property Usage

Position and bottom Property Description are

**absolute/fixed: Sets the bottom relative to the nearest positioned ancestor.
**relative: Moves the bottom relative to its normal position.
**sticky: Acts as relative inside the viewport, fixed outside.
**static: The bottom property has no effect.

**Syntax

bottom: auto| length| %| initial| inherit;

**Property values

Value	Description
auto	Default value; browser determines the bottom edge position.
Length	Sets the bottom edge position in pixels (px), centimeters (cm), or negative values are allowed.
Percentage	Sets the bottom edge position as a percentage of the containing element, including negative values.
initial	Sets the property to its default value.
inherit	Inherits the property value from its parent element.

1. Using bottom property value as auto

Using the bottom property value as auto allows the browser to automatically determine the element's position from the bottom.

**Example: This example the paragraph below uses fixed positioning with bottom set to auto, allowing the browser to adjust its position dynamically.

HTML `

CSS Bottom Property

GeeksforGeeks

This line will be auto adjusted for bottom based on the browser.

**Output:

2. Using bottom property value in pixels

Using the bottom property value in pixels sets the element's position a specific distance (in px) from the bottom edge.

**Example: This example we have two paragraphs in which we use fixed positioning with the bottom property set to 50px and -15px respectively, adjusting their positions accordingly.

HTML `

CSS Bottom Property

GeeksforGeeks

This line will be adjusted for bottom based on the length provided, i.e. 50px.

<p style="position: fixed; 
          bottom: -15px;">
    This line will be adjusted for bottom based
    on the length provided, i.e. -15px.
</p>

**Output:

3. Using bottom property value in Percentage

Using the bottom property value in percentage sets the element's position relative to a percentage of the containing element's height.

**Example: This example we use fixed positioning with bottom values set as percentages: 10% and -5%, adjusting their positions accordingly.

HTML `

CSS Bottom Property

GeeksforGeeks

This line will be adjusted for bottom based on the percentage provided, i.e. 10%.

<p style="position: 
          fixed; bottom: -5%;">
    This line will be adjusted for bottom based
    on the percentage provided, i.e. -5%.
</p>

**Output:

4. Using bottom property value initial

Using the bottom property value initial sets the element's position to its default value, as defined by the browser.

**Example: This example in paragraph we use fixed positioning with the bottom property set to "initial", adjusting its position based on the browser's default behavior.

HTML `

CSS Bottom Property

GeeksforGeeks

This line will be adjusted for bottom based on the initial value of the browser.

**Output:

5. Using bottom property value inherit

Using the bottom property value inherit makes the element inherit its bottom position from the bottom value of its parent element.

**Example: This example in paragraph uses fixed positioning with the bottom property set to "inherit", inheriting its position from the parent element.

HTML `

CSS Bottom Property

GeeksforGeeks

This line will inherit the position from the parent element.

**Output:

**Supported Browser:

Google Chrome 5.0
Edge 12
Mozilla 4.0
Safari 5.0
Opera 11.1