CSS bottom Property

The bottom CSS Property allows the vertical position of an element to be altered. The bottom property is used to set the value of the position of an element from the bottom of the viewport.

If the position value is fixed or absolute, then the element adjusts its bottom edge with respect to the bottom edge of its parent element or the block that holds it.
If the position value is relative then the element is positioned with respect to its own current bottom edge.
If the position value is sticky then the element adjusts the position which is relative when the element is inside the viewport & its position will be fixed it is outside of the viewport.
If the position value is static then the element does not have any effect due to the bottom property.

Syntax:

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

Property values:

auto: This is the default value of the bottom property. It sets the bottom property based on the browser ie., the browser will decide the bottom edge position.
Length: It sets the bottom edge position in px, cm also negative values are allowed.
Percentage: It sets the bottom edge position in % of the containing element. It accepts the negative values.
initial: Itis used to set an element’s CSS property to its default value. The initial keyword can be used for any CSS property, and on any HTML element.
inherit: It is used to inherit a property to an element from its parent element property value. The inherit keyword can be used for inheriting any CSS property, and on any HTML element.

Example: This example illustrates the use of the bottom property whose value is set to auto.

HTML

<!DOCTYPE html>
<html>
   
<head>
    <title> 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:

Example: This example illustrates the use of the bottom property where the property value is assigned as px.

HTML

<!DOCTYPE html>
<html>
   
<head>
    <title> 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:

Example: This example illustrates the use of the bottom property whose value is assigned as a percentage.

HTML

<!DOCTYPE html>
<html>
   
<head>
    <title> 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:

Example: This example illustrates the use of the bottom property whose value is set to its default value.

HTML

<!DOCTYPE html>
<html>
   
<head>
    <title> Bottom </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:

Example: This example illustrates the use of the bottom property whose value is set to inherit.

HTML

<!DOCTYPE html>
<html>
   
<head>
    <title> Bottom </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>