CSS | top Property

The top property in CSS is used to describe the top position of an element. The top property varies with the position of the element.

  • If the position is fixed or absolute, the element adjusts its top edge with respect to the top edge of its parent element or the block that holds it.
  • If the position is relative then the element is positioned with respect to its own current top edge.
  • If the position is static then the element does not have any effect due to the top property.

Syntax:

top: length|initial|inherit|auto;

Property Values:

  • length: This property is used to specify the top position of an element. The value of length can not be negative. The value of length can be in form of px, cm etc.

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
        <head>
            <title>
                CSS top Property
            </title>
              
            <!-- CSS property used here -->
            <style>
                .gfg1 {
                    position: relative;
                    top: 00px;
                    width: 400px;
                    height: 250px;
                    border: 2px solid black;
                }
                  
                .gfg2 {
                    position: absolute;
                    top: 50px;
                    border: 1px solid green;
                
                  
                .gfg3 {
                    position: relative;
                    top: 150px;
                    border: 1px solid green;
                
            </style>
        </head>
          
        <body>
            <div class="gfg1">
                Main block with position:relative and top: 0px
                  
                <div class="gfg2">
                    Sub block-1 with position: absolute and top: 50px
                </div>
                <div class="gfg3">
                    Sub block-2 with position: relative and top: 150px
                </div>
            </div>
        </body>
    </html>                    

    chevron_right

    
    

    Output:

  • initial: It is used to set top property to its default value.

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
        <head>
            <title>
                CSS top Property
            </title>
              
            <!-- CSS property used here -->
            <style>
                .gfg1 {
                    position: relative;
                    width: 400px;
                    height: 150px;
                    border: 2px solid black;
                }
                  
                .gfg2 {
                    position: absolute;
                    top: 50px;
                    border: 1px solid green;
                
                  
                .gfg3 {
                    position: relative;
                    top: initial;
                    border: 1px solid green;
                
            </style>
        </head>
          
        <body>
            <div class="gfg1">
                Main block with position:relative and top: 0px
                  
                <div class="gfg2">
                    Sub block-1 with position: absolute and top: 50px
                </div>
                <div class="gfg3">
                    Sub block-2 with position: relative and top: initial
                </div>
            </div>
        </body>
    </html>                    

    chevron_right

    
    

    Output:

  • inherit: This property is used to set top property from its parent.

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
        <head>
            <title>
                CSS top Property
            </title>
              
            <!-- CSS property used here -->
            <style>
                .gfg1 {
                    position: relative;
                    width: 400px;
                    height: 150px;
                    border: 2px solid black;
                }
                  
                .gfg2 {
                    position: absolute;
                    top: 50px;
                
                  
                .gfg3 {
                    position: absolute;
                    top: inherit;
                
            </style>
        </head>
          
        <body>
            <div class="gfg1">
                Main block with position:relative and top: 0px.
                  
                <div class="gfg2">
                    Sub block-1 with position: absolute 
                    and top: 50px.
      
                    <div class="gfg3">
                        Sub block-2 with position: absolute
                        and top: inherit.
                    </div>
                </div>
            </div>
        </body>
    </html>                    

    chevron_right

    
    

    Output:

Supported Browsers: The browser supported by top property are listed below:

  • Google Chrome 1.0
  • Internet Explorer 5.0
  • Firefox 1.0
  • Safari 1.0
  • Opera 6.0


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

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.