CSS - Bottom Property

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

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

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

Documentation / Reference





Discover More
CSS - Left property explained as 1, 2, 3

The left property is an offset from the left edge of the containing block. This article shows you in two simple rules how to determine the containing block.
CSS - Position - Offset Properties (Left, Right, Top, Bottom)

The Offset CSS Properties of a box are top, left, right, bottom They are applied to the containing box in the following positioning model in order to position a box. relative absolute...
CSS - Position Property

The position property specifies the positioning algorithms (positioning scheme) for elements. The position is calculated with respect to the edges of a rectangular box called the containing block. ...
CSS Position - Relative Positioning (Static > Relative)

relative is a positioning scheme that positions a box: according to the normal flow, then translate the box position with the offset properties (ie top, left, right, bottom) . The offset properties...



Share this page:
Follow us:
Task Runner