Skip to content
Related Articles

Related Articles

CSS | bottom Property
  • Last Updated : 08 Aug, 2019

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

Syntax:

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

Property values

  1. auto: This is the default value of the bottom property. It sets the bottom property based on the browser.

    Syntax:

    bottom: auto;

    Example:






    <html>
      
    <head>
        <title> Bottom </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. Length: It sets the bottom edge position in px, cm also negative values are allowed

    Syntax:

    bottom: 5px;

    Example:




    <html>
      
    <head>
        <title> Bottom </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. Percentage: It sets the value in % of the containing Element.

    Syntax:

    bottom: 10%;

    Example:




    <html>
      
    <head>
        <title> Bottom </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. initial: It sets the property value to its default value.

    Syntax:

    bottom: auto;

    Example:




    <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:

  5. inherit: It inherits the position from the parent element.

    Syntax:

    bottom: auto;

    Example:




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

    Output:

    Browser Supported: The browsers supported by bottom Property are listed below:

    • Google Chrome
    • Internet Explorer
    • Firefox
    • Opera
    • Safari
    My Personal Notes arrow_drop_up
Recommended Articles
Page :