The bottom property is the offset from the bottom edge of the containing_block.
It applies only if the box itself has a position value of:
The static position will not work. Ie the left 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) |
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
h1{
position: absolute;
bottom: 0px;
margin: 0px;
border: 1px solid aqua;
}
body {
height:180px;
border: 1px dashed steelblue;
margin: 0;
}
<h1>Absolute bottom positioned H1 element</h1>
offset properties can also be used in a inline context to move words (generally in the top or bottom direction.
<p> 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="exponent">exponent</span> for a formula.</p>
.exponent {
position: relative;
bottom: 0.5rem; /* bottom and not left because it does not make any sense in a inline scheme */
border:1px dashed blue; /* to see the border */
}
p {
border:1px dashed red; /* to see the border */
line-height:2rem; /* set the vertical space between rendered lines */
padding: 0.5rem /* text will not touch the border */
}