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:
The static position will not work. Ie the top position does not work in a normal flow positioning model
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 |
The top offset can be used in an Inline context to push word towards the bottom of the line.
Example:
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.
.indice {
position: relative;
top: 0.5rem; /* top will push the element towards the bottom */
border:1px dashed blue; /* to see the border */
}
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 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 */
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 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>
.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 */
}