CSS - Bottom Property

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 absolute box is a heading 1 that will be located at the bottom of the body / viewport

h1{
   position: absolute;
   bottom: 0px;
   margin: 0px;
   border: 1px solid aqua;
}

• Because an absolute box does not participate into the height of a page, we need to set it on the body otherwise we get a body with a height of 0px.

body {
  height:180px;
  border: 1px dashed steelblue;
  margin: 0;
}

• The HTML with the H1 absolute positioned to the bottom

<h1>Absolute bottom positioned H1 element</h1>

• Result:

Relative Positioning - Inline

offset properties can also be used in a inline context to move words (generally in the top or bottom direction.

• The HTML with:
  • a paragraph to set a minimum line height
  • and a span to set the bottom CSS property to word

<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>

• The css with the bottom property

.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 */
}

• The css with the line-height property for each paragraph

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 */
}

• Result