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:



    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
Recommended Articles
Page :