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)

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


Powered by ComboStrap