CSS | bottom Property

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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:

  2. Length: It sets the bottom edge position in px, cm also negative values are allowed

    Syntax:

    bottom: 5px;

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:

  3. Percentage: It sets the value in % of the containing Element.

    Syntax:

    bottom: 10%;

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:

  4. initial: It sets the property value to its default value.

    Syntax:


    bottom: auto;

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:

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

    Syntax:

    bottom: auto;

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:

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

    • Google Chrome
    • Internet Explorer
    • Firefox
    • Opera
    • Safari


    My Personal Notes arrow_drop_up

    Final Year Student Programming Enthusiast

    If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

    Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




    Article Tags :

    Be the First to upvote.


    Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.