CSS - Top Property

About

The top property is a offset property that specifies how far is positioned the box from the top edge of its containing_block.

It applies only if the box itself has a position value of:

  • relative
  • absolute
  • or fixed

The static position will not work. Ie the top position does not work in a normal flow positioning model

Containing Block

The containing block depends on the positioning model.

If the box position property is With the following ascendant rule The positioning model is Then the containing block is
relative The parent container has a static or relative position relative positioning the box itself after being laid out by the normal flow
absolute An ascendant container has a relative position absolute positioning the first ascendant relative box
or the viewport (ie screen) if none
fixed None fixed positioning an anchored viewport (ie screen)
sticky None sticky positioning the nearest ancestor scroll container

Example / Demo

Relative Positioning - Inline

The top offset can be used in an Inline context to push word towards the bottom of the line.

Example:

  • The HTML with the words that will be get a top offset in the span element
Relative positioning can also be used inline to offset the position of an element 
in a paragraph for instance such as creating an <span class="indice">indice</span> for a formula.
  • The css rule that will apply to the span element
.indice {
   position: relative;
   top: 0.5rem; /* top will push the element towards the bottom */
   border:1px dashed blue; /* to see the border */
}
  • Result

Relative Positioning - Block

In a relative positioning (where the box has a relative position), the top property defines an offset of the box itself after it has been been laid out via the normal flow algorithm.

In other word, the containing box is the box itself after been laid out by the normal flow

In the example, we are using the following notion:

In this example, we have p elements that we will offset by a factor of 10px depending on their position in the list. The offset will apply after been laid out with the normal flow.

<p class="relative_box">Position 1: At 10px from the layout of the normal flow (ie 10px from the body container)</p>
<p class="relative_box">Position 2: At 10px from the layout of the normal flow (ie 10px from the previous p element )</p>
<p class="static_box">Position 3: Top 30px will not apply in a static box and this is the normal position of this paragraph</p>
  • The rule for the class static box and relative box
/* the rule that set the box static and paint them with a red border */
.static_box {
   /* position: static - this is the default value, not need*/ 
   padding:10px; /* padding to have the text not touching the border */
   border:1px solid red; /* to see the border */
}
/* the rule that set the box relative and paint them with a blue border */
.relative_box {
   position: relative; /* The box positioning is relative to itself after its normal flow positioning */ 
   padding:10px; /* padding to have the text not touching the border */
   border:1px solid blue; /* to see the border */
}
/* to paint the body */
body {
     border:1px dashed blue; /* to see the border */
}
body > p:nth-child(1) {  top: 10px;  }  /* For the first p */
body > p:nth-child(2) {  top: 20px;  }  /* For the second p */
body > p:nth-child(3) {  top: 30px;  }  /* For the third p */
  • Result:

Absolute Positioning

In a absolute model, the containing box is the first ascendant box with a relative,absolute or fixed position.

If there is no relative ascendant box, the containing box is the viewport

  • The HTML with a paragraph to hold the absolute box
The body has a 200px height.
<p class="absolute_top">This paragraph is absolute top positioned against its containing box (which is the body / viewport) and move it then to the bottom by 50px</p>
  • The css with the top property
.absolute_top {
   position: absolute;
   top: 50px; /* 50px from the top edge of the viewport (ie body) */
   border:1px dashed red; /* to see the border */
   max-width:75%; /* width does not follow the content and takes not the full width*/
   padding:1rem /* to not have the text touching the border */
}
body {
  height:200px; /* An absolute box does not participate in the height of the body, we need to give a little bit otherwise we see nothing */
  border:1px dashed blue; /* to see the border */
}
  • Result

Documentation / Reference





Discover More
CSS - Bottom Property

The bottom property is the offset from the bottom edge of the . It applies only if the box itself has a position value of: relative absolute or fixed staticleftnormal flow positioning model ...
CSS - Left property explained as 1, 2, 3

The left property is an offset from the left edge of the containing block. This article shows you in two simple rules how to determine the containing block.
CSS - Position - Offset Properties (Left, Right, Top, Bottom)

The Offset CSS Properties of a box are top, left, right, bottom They are applied to the containing box in the following positioning model in order to position a box. relative absolute...
CSS - Position Property

The position property specifies the positioning algorithms (positioning scheme) for elements. The position is calculated with respect to the edges of a rectangular box called the containing block. ...
CSS - Sticky positioning (Pinning)

Sticky is a positioning option that: keeps the box in view (ie in the viewport)) within its containing block as the user scrolls. From a logical point of view, the element is treated: first...
CSS Position - Relative Positioning (Static > Relative)

relative is a positioning scheme that positions a box: according to the normal flow, then translate the box position with the offset properties (ie top, left, right, bottom) . The offset properties...
Web Security - Clickjacking

A page that provides users with an interface to perform actions that the user might not wish to perform needs to be designed so as to avoid the possibility that users can be tricked into activating the...



Share this page:
Follow us:
Task Runner