CSS bottom property

The CSS bottom property is used to specify the distance between the bottom edge of a positioned element and the bottom edge of its containing element. It is applicable only to elements that have a positioning context set, such as position: absolute;, position: relative;, or position: fixed;.

The syntax for the bottom property is as follows:

selector {
  bottom: value;
}

• selector: Represents the HTML element or class to which the bottom property will be applied.
• value: Specifies the distance between the bottom edge of the element and the bottom edge of its containing element. It can be expressed in pixels (px), percentages (%), em units, or other length units.

Example:

div {
  position: absolute;
  bottom: 20px;
}

In this example, the <div> element is positioned absolutely within its containing element, and its bottom edge will be 20 pixels above the bottom edge of the container.

The bottom property is often used in conjunction with the left, right, and top properties to position elements precisely within their containers. When using absolute or fixed positioning, setting any combination of top, right, bottom, and left properties will define the exact placement of the element relative to its containing element or the viewport.

It’s important to note that when using the bottom property, the element’s positioning context (i.e., the closest ancestor with a positioning context) will determine where the bottom edge is measured from. For example, if the closest positioned ancestor is a relatively positioned element, the bottom value will be relative to the bottom edge of that ancestor.

Keep in mind that using absolute and fixed positioning can affect the document flow and may require careful consideration to avoid unintended layout issues. Always test your layout thoroughly across different screen sizes and devices to ensure consistent positioning and visual presentation.