html - How to position element in the top right corner using CSS inset?

Question

Instead of the top and right CSS properties, I'd like to use inset to position the element.

For example, the following code places the element to the top right corner:

.top-right {
  top: 0;
  right: 0;
} 

How would you achieve the same using the inset property? I have tried using different ways and can't figure it out.

Although I set both top and right to 0 with inset in the following example, it doesn't work:

.top-right {
  inset: 0 0;
}

Answer 1

It would be:

.top-right {
  inset: 0 0 auto auto;
}

The order is top, right, bottom, left. It has the same multi-value syntax as the margin or the padding shorthand.

If you use inset: 0 0;, it's the same as inset: 0 0 0 0; and it means you also set the bottom and the left properties to 0. You could set them to the initial value (auto) instead to solve your problem.