CSS bottom

The CSS bottom property sets the bottom edge of an element to a unit above/below the bottom edge of its containing element. This property is useful for positioning elements at a specific distance from the bottom of the container.

Here is the syntax for the bottom property:

bottom: length|percentage|auto|initial|inherit;

The values that can be assigned to the bottom property are:

length: Specifies a length in px, em, rem, etc.
percentage: Specifies a percentage relative to the height of the containing block.
auto: The default value. The browser calculates the distance from the bottom edge automatically.
initial: Sets the property to its default value.
inherit: Inherits the property from its parent element.

Let's see some examples of how the bottom property works:

Result:

In this example, we have a container with a height of 200px. Inside the container, there is a red box positioned 20px from the bottom edge of the container using the bottom: 20px; property.

Now, let's see another example using percentage values:

Result:

In this example, the green box is positioned 10% from the bottom edge of the container.

By using the bottom property, you can easily position elements at a specific distance from the bottom of their containing blocks.