How to put elements at the bottom of its container with CSS

Learn how to put elements at the bottom of its container with CSS.

HTML has a parent-child relationship. To put an element at the bottom of its container with CSS, you need to use the following properties and values:

• position: relative; (parent)
• position: absolute; (child)
• bottom: 0; (child)

Example:

<div class="parent">
  <div class="child">
  </div>
</div>

.parent {
  position: relative;
}

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

To make it easier to visualize I took the CSS classes from above and added some width, height, and colors to them:

.parent {
  position: relative;
  background-color: black;
  height: 200px;
  width: 200px;
}

.child {
  position: absolute;
  bottom: 0;
  background-color: darkred;
  height: 50px;
  width: 50px;
}

Result:

As you can see in the example above, the child element is automatically pinned to the left side of its container.

If you want to put the child element at the bottom-right you need to specify it directly on the child element with the right property:

.child {
  position: absolute;
  bottom: 0;
  right: 0;
}

Result: