How to Align an HTML Element to the Bottom of Its Parent?

To position an HTML element to the bottom of its parent, you can do either of the following:

1. Use position: relative on Parent and position: absolute on the Child;
2. Use Flexbox.

Using position: relative on Parent and position: absolute on the Child

In this approach, you need to do the following:

1. Add position: relative to the parent;
2. Add position: absolute and bottom: 0 to the child;
3. Optionally, specify a height for the parent (it's not strictly necessary, but it's often useful);
4. Optionally, add left: 0 to the child to align it with the left edge of the parent.

Consider, for example, the following where the child is positioned at the bottom of a fixed-height parent, and is unaffected by parent's padding:

Please note that this method is unaffected by changes to the parent's box sizing, but be cautious as the absolutely positioned child may overlap other content within the parent.

Using Flexbox

In this approach, you need to do the following:

1. Set the parent container to display: flex and flex-direction: column;
2. Apply margin-top: auto to the child element;
3. Optionally, specify a height for the parent (it's not strictly necessary, but it's often useful).

Consider, for example, the following where the child is positioned at the bottom of a fixed-height parent, but is affected by parent's padding:

Please note that this method adjusts to varying content heights within the parent but is affected by changes to the parent's box sizing, such as padding.