CSS bottom Property

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

<!DOCTYPE html>
<html>

<head>
    <title>CSS Bottom Property</title>
</head>

<body>
    <h1 style="color:darkgreen;">
        GeeksforGeeks
    </h1>
    <p style="position: fixed;
              bottom: auto;">
        This line will be auto adjusted for
        bottom based on the browser.
    </p>

</body>

</html>

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

<!DOCTYPE html>
<html>

<head>
    <title>CSS Bottom Property</title>
</head>

<body>
    <h1 style="color:darkgreen;">
        GeeksforGeeks
    </h1>
    <p style="position: fixed; 
              bottom: 50px;">
        This line will be adjusted for bottom based
        on the length provided, i.e. 50px.
    </p>

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

</body>

</html>

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

<!DOCTYPE html>
<html>

<head>
    <title>CSS Bottom Property</title>
</head>

<body>
    <h1 style="color:darkgreen;">
        GeeksforGeeks
    </h1>
    <p style="position: 
              fixed; bottom: 10%;">
        This line will be adjusted for bottom based
        on the percentage provided, i.e. 10%.
    </p>

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

</body>

</html>

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

<!DOCTYPE html>
<html>

<head>
    <title>CSS Bottom Property</title>
</head>

<body>
    <h1 style="color:darkgreen;">
        GeeksforGeeks
    </h1>
    <p style="position: fixed;
              bottom: initial;">
        This line will be adjusted for bottom based
        on the initial value of the browser.
    </p>

</body>

</html>

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

<!DOCTYPE html>
<html>

<head>
    <title>CSS Bottom Property</title>
</head>

<body>
    <h1 style="color:darkgreen;">
        GeeksforGeeks
    </h1>
    <p style="position: fixed; 
              bottom: inherit;">
        This line will inherit the position
        from the parent element.
    </p>

</body>

</html>