BlogsDope image BlogsDope

CSS top

Jan. 5, 2018 HTML CSS 2081

The CSS top property specifies the position of the top edge of a positioned element. Positioned elements are the elements whose position value is anything except static.

Let's understand how this property works by looking at its effect on different positioned elements. Also note that the default positioning of an element is static.

CSS

top: value;

Relatively Positioned

If an element is relatively positioned, then the top property adds an offset to the element's top edge which moves it to the bottom from its normal flow.

HTML

<div id="div1"></div>
<div id="div2"></div>

CSS

#div1, #div2 {
  display: inline-block;
}

#div1 {
  width: 100px;
  height: 100px;
  background-color: #1E73A6;
}

#div2 {
  width: 100px;
  height: 100px;
  background-color: green;
  top: 40px;
  position: relative;
}

See the Pen CSS top property with relative positioning by Aakhya Singh (@aakhya) on CodePen.

In the above example, the green box is given position: relative. Thus, giving top: 40px shifted it 40px towards the bottom from its normal flow.

Absolutely Positioned

For absolutely positioned elements (i.e. those having position: absolute or position: fixed), this property shifts the top edge of the element towards the bottom from the top edge of its nearest parent container having some positioning (other than static) or the document.

To understand it better, look at the following example in which the property is applied to an absolutely positioned element which has no positioned parent.

HTML

<div id="div1">
  <div id="div2"></div>
</div>

CSS

#div1 {
  height: 130px;
  margin-top: 70px;
  background-color: #1E73A6;
}

#div2 {
  width: 100px;
  height: 100px;
  background-color: green;
  position: absolute;
  top: 40px;
}

See the Pen CSS top property with absolute positioning by Aakhya Singh (@aakhya) on CodePen.

Here, the green box is given position: absolute. Since its parent div is not positioned, therefore giving top: 40px shifted it 40px towards the bottom from the top margin of the document.

Now consider another example given below in which the parent div is given position: relative and observe the green box getting shifted 40px towards the bottom from the top edge of the parent div.

HTML

<div id="div1">
  <div id="div2"></div>
</div>

CSS

#div1 {
  height: 160px;
  margin-top: 40px;
  background-color: #1E73A6;
  position: relative;
}

#div2 {
  width: 100px;
  height: 100px;
  background-color: green;
  position: absolute;
  top: 40px;
}

See the Pen CSS top property with absolute positioning by Aakhya Singh (@aakhya) on CodePen.

Now let's look at the different values that the top property can take.

Values

auto : Lets the browser decide the position of the top edge of the element. This is the default value.

<length> : Specifies the position of the top edge in px, pt, em, ex, etc. Negative values are allowed.

<percentage> : Specifies the position of the top edge in percentage with respect to the container element's height. Negative values are allowed.

initial : Sets the default value of the property.

inherit : Inherits the value from parent element.

You can also give negative values to the property as shown in the following example.

See the Pen CSS top property with negative percentage value by Aakhya Singh (@aakhya) on CodePen.

There are two other common but important points to be noted.

  • If you give both top and bottom values to a relatively positioned element, then it will shift only according to the top value.
  • If you give both top and bottom values to an absolutely positioned element, then its height will change to satisfy both the values if its height is not specified.

Browser Support

This property is supported in all major modern browsers.


Liked the post?
Inquisitive and passionate Front-end Developer and Web Designer and Co-Founder of CodesDope.
Editor's Picks
0 COMMENT

Please login to view or add comment(s).