如何使用 CSS inset 将元素定位在右上角？

Question

而不是top和rightCSS 属性，我想用它 inset来定位元素。

例如，以下代码将元素放置在右上角：

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

您将如何使用该inset属性实现相同的目标？我尝试过使用不同的方法，但无法弄清楚。

尽管我在下面的示例中将top和都设置right为 0 inset，但它不起作用：

.top-right {
  inset: 0 0;
}

Answer 1

这将是：

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

顺序是上、右、下、左。它具有与margin或padding速记相同的多值语法。

如果您使用inset: 0 0;，则与inset: 0 0 0 0;和相同，这意味着您还将bottom和left属性设置为 0。您可以将它们设置为初始值 ( auto) 来解决您的问题。