The top attribute in CSS is utilized to define the vertical placement for positioned elements. It has no impact on elements that are not positioned. This property is part of a group of four offset properties, including left, right, and bottom.
The impact of this attribute varies based on the positioning of the related element, specifically determined by the value assigned to the position property. In cases where the position property is defined as static, the top property does not exert any influence.
The effects of this property on positioned elements other than the value static are listed as follows:
- When the element is absolutely or fixed positioned (i.e., position: absolute; and position: fixed ;), the top property specifies the distance between the element's top edge and the top edge of its containing block (ancestor to which the element is relatively positioned).
- If the element is relatively positioned (i.e., position: relative ;), the top property moves the element's top edge to above/below from its normal position.
- If the position is set to sticky (i.e., position: sticky ;) then, the positioning context is the viewport. When the element is inside the viewport, the top property behaves like its position is relative. When the element is outside, then the top property behaves like its position is fixed.
Syntax
top: auto | length | percentage | initial | inherit;
Property Values
The values assigned to this attribute are specified in the following manner:
The default value "auto" enables the browser to determine the position of the top edge through calculation.
The length attribute specifies the location of the top property in pixels, centimeters, points, etc., and supports negative values.
percentage: This parameter specifies the vertical location of the top property as a percentage (%). The calculation is based on the height of the containing block of the element. Negative values are also permitted in this context.
It assigns the attribute back to its original default setting.
When an element inherits a property, it acquires that property from its parent element.
Now, let's grasp this attribute by utilizing a few illustrations.
Example - Using negative values
In this instance, there are four div elements positioned in a relative manner. The top property is being utilized on these elements with negative values. In this scenario, the negative lengths specified for the top property are in pixels (px) and em units.
<!DOCTYPE html>
<html>
<head>
<title>
CSS top Property
</title>
<style>
div{
position: relative;
width: 150px;
height: 150px;
font-size: 30px;
}
#len {
top: -75px;
border: 5px solid green;
}
#em {
top: -2em;
border: 5px solid blue;
}
#auto {
top: auto;
border: 5px solid red;
}
#init {
top: initial;
border: 5px solid darkviolet;
}
h1{
text-align: center;
}
</style>
</head>
<body>
<h1> Example of the top Property </h1>
<div id = "len"> top: -75px; </div>
<div id = "em"> top: -2em; </div>
<div id = "auto"> top: auto; </div>
<div id = "init"> top: initial; </div>
</body>
</html>
Output
Example
In this instance, there are four div elements that are positioned absolutely using the CSS property position: absolute. We are setting the top property for each of these elements. When two div elements have top: initial; and top: auto; respectively, they will overlap due to having identical dimensions and default values. It's important to note that the top property can be specified using values in pixels (px) or percentages (%).
<!DOCTYPE html>
<html>
<head>
<title>
CSS top Property
</title>
<style>
div{
position: absolute;
width: 150px;
height: 150px;
font-size: 30px;
}
#len {
top: 250px;
border: 5px solid lightgreen;
}
#per {
top: 60%;
border: 5px solid blue;
}
#auto {
top: auto;
border: 7px solid red;
}
#init {
top: initial;
border: 5px solid lightblue;
}
</style>
</head>
<body>
<h1> Example of the top Property </h1>
<div id = "len"> top: 250px; </div>
<div id = "per"> top: 60%; </div>
<div id = "auto"> top: auto; </div>
<div id = "init"> top: initial; </div>
</body>
</html>
Output