CSS - Bottom Property

1 - About

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:

  • relative
  • absolute
  • or fixed
The static position will not work. Ie the left position does not work in a normal flow positioning model

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

4 - Example

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

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

5 - Documentation / Reference


Data Science
Data Analysis
Statistics
Data Science
Linear Algebra Mathematics
Trigonometry

Powered by ComboStrap