Skip to content
Related Articles

Related Articles

CSS top Property

View Discussion
Improve Article
Save Article
Like Article
  • Last Updated : 19 Oct, 2021

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 value 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 value is relative then the element is positioned with respect to its own current top edge.
  • If the position value is static then the element does not have any effect due to the top property.

Syntax:

top: length| initial| inherit| auto;

Property Values: All the properties are described well with the example below.

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

Example: This example illustrates the use of the length property that will use to sets the top edge position in px, cm, etc.

HTML




<!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 an element’s CSS property to its default value. The initial keyword can be used for any CSS property, and on any HTML element.

Example: This example illustrates the use of the initial property in order to set the value to its default value.

HTML




<!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 inherit a property to an element from its parent element property value. The inherit keyword can be used for inheriting any CSS property, and on any HTML element.

Example: This example illustrates the use of the inherit property, to inherit the properties from its parent element property value.

HTML




<!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 the top property are listed below: 

  • Google Chrome 1.0
  • Internet Explorer 5.0
  • Microsoft Edge 12.0
  • Firefox 1.0
  • Opera 6.0
  • Safari 1.0


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!