Skip to content
Related Articles

Related Articles

Improve Article

CSS | top Property

  • Last Updated : 09 Aug, 2019

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:




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

    Output:

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

    Example:




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

    Output:

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

    Example:




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

    Output:

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

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



My Personal Notes arrow_drop_up
Recommended Articles
Page :