The bottom property defines the vertical position of a positioned element, but will have no affect on an item not positioned.

• Position: absolute or fixed – the bottom property sets the bottom edge of an element above/below the bottom edge of its nearest-positioned ancestor
• Position: relative – the bottom property causes the element’s bottom edge to move above/below its normal position
• Position: sticky – the bottom property behaves as if relative when the element is inside the viewport, and as if fixed when it is outside the viewport
• Position: static – the bottom property will have no effect

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

These are the allowed values.

The HTML element can also be styled using JavaScript and the element’s id.

document.getElementById('my_div').style.bottom = '10px';

<button onclick='my_function()'>Click Here</button>

<script>
function my_function() {
    document.getElementById('my_div').style.bottom = '10px';
}
</script>