CSS - top



The top CSS property is used to specify the vertical position of an element relative to its containing element when the position property is set to absolute, fixed, relative, or sticky.

Note: The top property only works if the position property is set to a value other than static (which is the default value).

Based on the value of the position property, the effect of top property is determined.

Position Value Bottom Property
absolute or fixed Specifies the distance between element's top edge's outer margin and the inner border of the container's top edge.
relative Specifies the distance the element's top edge is moved below its normal position.
sticky Used to compute the sticky-constraint rectangle.
static No effect on the element's position.

Both top and bottom values are respected, when both top and bottom values are specified, position is set to absolute or fixed , and height is either 100% or auto.

The top value takes precedence and the bottom value is ignored, when height is constrained or position is set to relative.

Possible Values

  • <length> − Can specify a negative, null or positive value.

  • <percentage> − Percentage of the container's height.

  • auto − Default value. Browser calculates the bottom position.

Applies To

All the HTML positioned element.

DOM Syntax

object.style.top = "20px";

CSS top - Absolute Position

Here is an example where we set position:absolute and different top property values (auto,percent,length) −

<html>
<head>
<style>  
   div {
      position: absolute;
      height: 100px;
      border: 3px solid rgb(12, 5, 62);
   }
   div.auto {
      top:auto;
      background-color: yellow;
   }
   div.percent {
      top:30%;
      background-color: pink;
   }
   div.length {
      top:3in;
      background-color:transparent;
   }
</style>
</head>
<body>
   <div class="auto">Position:absolute top:auto</div>
   <div class="percent">Position:absolute top:30%</div>
   <div class="length">Position:absolute top:3inches</div>
</body>
</html>

CSS top - Relative Position

Here is an example where position:relative and different top property values (auto,percent,length) −

<html>
<head>
<style>  
   div {
      position: relative;
      height: 100px;
      border: 3px solid rgb(12, 5, 62);
   }
   div.auto {
      top:auto;
      background-color: yellow;
   }
   div.percent {
      top:30%;
      background-color: pink;
   }
   div.length {
      top:3in;
      background-color:transparent;
   }
</style>
</head>
<body>
   <div class="auto">Position:relative top:auto</div>
   <div class="percent">Position:relative top:30%</div>
   <div class="length">Position:relative top:3inches</div>
</body>
</html>

CSS top - Fixed Position

Here is an example where we set position:fixed and different top property values (auto,percent,length) −

<html>
<head>
<style>  
   div {
      position: fixed;
      height: 100px;
      border: 3px solid rgb(12, 5, 62);
   }
   div.auto {
      top:auto;
      background-color: yellow;
   }
   div.percent {
      top:30%;
      background-color: pink;
   }
   div.length {
      top:3in;
      background-color:transparent;
   }
</style>
</head>
<body>
   <div class="auto">Position:fixed top:auto</div>
   <div class="percent">Position:fixed top:30%</div>
   <div class="length">Position:fixed top:3inches</div>
</body>
</html>

CSS top - Sticky Position

Here is an example where position:sticky and different top property values (auto,percent,length) −

<html>
<head>
<style>  
   div {
      position: sticky;
      height: 100px;
      border: 3px solid rgb(12, 5, 62);
   }
   div.auto {
      top:auto;
      background-color: yellow;
   }
   div.percent {
      top:30%;
      background-color: pink;
   }
   div.length {
      top:3in;
      background-color:transparent;
   }
</style>
</head>
<body>
   <div class="auto">Position:sticky top:auto</div>
   <div class="percent">Position:sticky top:30%</div>
   <div class="length">Position:sticky top:3inches</div>
</body>
</html>

CSS top - Static Position

Here is an example where position:static and different top property values (auto,percent,length) −

<html>
<head>
<style>  
   div {
      position: static;
      height: 100px;
      border: 3px solid rgb(12, 5, 62);
   }
   div.auto {
      bottom:auto;
      background-color: yellow;
   }
   div.percent {
      bottom:30%;
      background-color: pink;
   }
   div.length {
      bottom:3in;
      background-color:transparent;
   }
</style>
</head>
<body>
   <div class="auto">Position:static top:auto</div>
   <div class="percent">Position:static top:30%</div>
   <div class="length">Position:static top:3inches</div>
</body>
</html>
Advertisements