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

• Position: absolute or fixed – the top property sets the top edge of an element above/below the top edge of its nearest positioned ancestor
• Position: relative – the top property causes the element’s top edge to move above/below its normal position
• Position: sticky – the top 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 top property will have no effect

div {
    position: absolute;
    top: 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.top = '10px';

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

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