CSS - Bottom

Ethan D. -

Syntax and Values

The bottom property in CSS is used to specify the vertical position of an element relative to its containing block. The general syntax for using the bottom property is as follows:

Example

selector {
  bottom: value;
}

The value in the syntax above can be one of the following:

Length

You can use length values such as pixels (px), ems (em), rems (rem), or other valid CSS length units to specify the distance between the bottom edge of the element and the bottom edge of its containing block. For example, bottom: 20px; positions the element 20 pixels from the bottom of its container.

Example

element {
  bottom: 20px;
}

Percentage

Using a percentage value calculates the bottom offset relative to the height of the containing block. For instance, bottom: 10%; positions an element's bottom edge 10% of its container's height from the bottom.

Example

element {
  bottom: 10%;
}

Auto

This is a default value for bottom. When set to auto, an element's bottom position is determined by normal document flow and not explicitly specified.

Example

element {
  bottom: auto;
}

Inherit

When set to inherit, an element takes on its parent’s bottom value. This allows easy propagation through document hierarchy.

Example

element {
  bottom: inherit;
}

It's important that you note that this property only takes effect when an element’s position property is set to a value other than static (the default). The position property determines positioning context for elements, affecting how this property behaves.

Length Values

When using the bottom property in CSS, you can specify the offset from the bottom edge of the containing block using various length values. Some common length units include:

  • Pixels (px): Pixels are a fixed-size unit and are often used for precise positioning. For example, bottom: 50px; positions an element 50 pixels from the bottom of its containing block.

  • Ems (em): Ems are relative to the font size of the element. One em equals the font size of the element. So, if an element has a font size of 16 pixels and you set bottom: 2em;, the element will be positioned 32 pixels (2 * 16px) from the bottom.

  • Rems (rem): Rems, or root ems, are relative to the root element's (usually <html>) font size. They provide a way to specify lengths that are consistent throughout the document.

CSS Absolute Positioning Example

.box {
  position: absolute;
  bottom: 20px;
  left: 50px;
}

In this example, .box is positioned 20 pixels from the bottom and 50 pixels from its nearest positioned ancestor (or initial containing block if no ancestor is positioned).

CSS Relative and Absolute Positioning Example

.container {
    position: relative;
    height: 300px;
}

.item {
    position: absolute;
    bottom: 1.5rem;
}

In this case, .item is positioned at a distance equal to 1.5 rems from its container's (container) bottom edge. The actual offset in pixels will depend on the root's font size.

Remember that length values used with the bottom property are always calculated starting at the lower edge, and it only works when the position value isn’t static.

Percentage Values

When using percentage values with the bottom property in CSS, the value is calculated relative to the height of the containing block. The containing block is typically the nearest ancestor element that has a position value other than static.

To calculate the offset from the bottom using a percentage, the browser takes the specified percentage of the containing block's height. For example, if the containing block has a height of 500 pixels and you set bottom: 10%;, the element will be positioned 50 pixels (10% of 500px) from the bottom of its containing block.

CSS Percentage Bottom Positioning Example

.container {
  position: relative;
  height: 400px;
}

.box {
  position: absolute;
  bottom: 20%;
  left: 50%;
}

In this example, .box will be positioned 80 pixels (20% of 400px) from the bottom and at half width from its left side.

Percentage values give you flexibility to position elements in a way that adapts to changes in its container's dimensions. This is useful when creating flexible layouts that adjust based on parent element size or viewport size.

Example: CSS Percentage Bottom Positioning with Relative Parent

.container {
    position: relative;
    height: 80vh;
}

.footer {
    position: absolute;
    bottom:5%;
    left: 0;
    right: 0;
}

In this case, .footer will always be positioned at five percent from .container's bottom edge regardless of actual pixel height since it’s set to eighty percent viewport height.

It's important to remember that for percentage values to work with bottom, your container must have a specified height. If your container's height isn't explicitly set or depends on content, percentages may not behave as expected.

Auto Value

The auto value is the default for the bottom property in CSS. When an element's bottom property is set to auto, its position will be determined by the normal flow of the document and will not be explicitly positioned.

In the normal document flow, block-level elements are stacked vertically from top to bottom. By default, the bottom property of an element is set to auto, which means that its position will be determined by its place in the document flow and other elements around it.

Example: Default bottom property

.box {
  position: static;
  bottom: auto;
}

You should use the auto value for the bottom property when you want an element to be positioned according to the normal document flow and not offset from the bottom of its containing block.

Example: Relative positioning

.container {
  position: relative;
  height: 300px;
}

.item {
  position: absolute;
  bottom: auto;
}

In this case, .item will be positioned according to normal document flow within .container. The declaration ensures that .item's bottom position is not offset from .container.

Using auto for the bottom property helps maintain the vertical stacking behavior of elements and lets browsers determine their positions based on document flow.

Note that using auto for bottom only takes effect when an element's position is set as static, relative, or sticky. If an element's position is set as absolute or fixed, setting bottom: auto; won't affect positioning.

Inherit Value

In CSS, the inherit keyword allows an element to inherit the value of a property from its parent element. When used with the bottom property, inherit causes an element to take on the same bottom value as its parent.

Using inherit can be useful when you want consistency in positioning across nested elements or when you want to avoid repeating the same bottom value for multiple elements.

Parent and Child Inherit Example

.parent {
  position: relative;
  bottom: 50px;
}

.child {
  position: absolute;
  bottom: inherit;
}

The .child element will inherit the bottom value from its parent (.parent). So, the child element will be positioned 50 pixels from the bottom of its containing block, just like its parent.

Another example where inherit can be helpful is when you have deeply nested elements and want them to maintain the same positioning relative to their ancestors.

Nested Elements Inherit Example

.grandparent {
  position: relative;
  bottom: 20%;
}

.parent {
  position: absolute;
  bottom: inherit;
}

.child {
  position: absolute;
  bottom: inherit;
}

In this case, both .parent and .child will be positioned 20% from the bottom of their respective containing blocks, inheriting the value from .grandparent.

By using inherit, you can create a consistent positioning scheme throughout your document hierarchy and make your CSS more maintainable by reducing repeated values.

Keep in mind that for inherit to work, the parent element must have a valid bottom value set. If not defined or set to auto, it defaults to auto positioning.

Positioning Context

To understand how the bottom property works, you need to know about the containing block and how it relates to the position property. The containing block is the ancestor element that serves as a reference for positioning an element using properties like bottom.

The behavior of the bottom property depends on the value of the position property applied to an element. Different positioning contexts determine how the bottom property affects an element's placement.

Static Positioning

Static positioning is the default context for elements. When an element has position: static;, the bottom property has no effect on its position. The element remains in its normal document flow and cannot be offset using bottom.

Example: Static Positioning

.box {
  position: static;
  bottom: 50px; /* This will have no effect */
}

Relative Positioning

When an element has position: relative;, it creates a new context for itself. The bottom property can be used to offset the element vertically relative to its normal position in the document flow.

Example: Relative Positioning

.box {
  position: relative;
  bottom: 20px; /* Moves up from its normal position */
}

The element will move 20 pixels up from its original position.

Absolute Positioning

An element with position: absolute; is positioned relative to its nearest positioned ancestor (an ancestor with a position value other than static). If no positioned ancestor exists, it is positioned relative to the initial containing block (usually, this is your viewport).

The bottom specifies how far away from that edge it should be placed.

Example: Absolute Positioning

.container {
  position: relative;
  height: 200px;
}

.box {
  position: absolute;
  bottom: 20px;
}

Here, .box will be placed within .container, being moved up by exactly twenty pixels from .container's lower edge.

Fixed Positioning

An item having fixed-positioned properties means they are always related directly back towards browser windows themselves - not any parent containers whatsoever! Bottom values here specify distances between said items' own lower edges versus those same browsers’.

Example: Fixed Positioning

.box {
  position: fixed;
  bottom: 20px;
}

This means our .box stays put even if scrolling occurs.

Sticky Positions

Sticky positions combine aspects both relatively and fixed ones together into one neat package deal instead! Items start behaving normally until reaching certain thresholds set via things such as bottoms, then become stuck there instead afterward.

Example: Sticky Positions

.box {
  position: sticky;
  bottom: 20px;
}

Once reaching specified points, these elements stop moving further beyond them anymore.