The bottom CSS property is used to set the vertical position of an element relative to its containing parent or positioned ancestor. It specifies the distance between the bottom edge of the element and the bottom edge of its containing parent or the bottom edge of the viewport if the element is positioned absolutely.
The bottom property accepts various values, including length units (such as pixels or percentages), keywords, or the auto keyword.
Here’s an example:
.box {
position: absolute;
bottom: 20px;
}
In this example, the .box class is positioned absolutely using position: absolute;. The bottom: 20px; rule sets the element’s bottom edge 20 pixels away from the bottom edge of its containing parent. This will move the element upward.
You can use negative values to position the element relative to the bottom edge of its containing parent in the opposite direction. For example:
.box {
position: relative;
bottom: -10px;
}
In this example, the .box class is positioned relatively using position: relative;. The bottom: -10px; rule shifts the element 10 pixels downward, creating an overlap with its following sibling element.
The bottom property is commonly used in conjunction with other positioning properties, such as position, top, and left, to precisely position elements within a layout. It allows you to control the vertical position of elements, enabling flexible and dynamic designs.