Css 如何在引导卡的右上角设置IMG？

我尝试在引导卡的右上角设置一个图像（覆盖卡）。我用绝对位置定位图像。我想这就是问题所在。如果我更改屏幕大小，则图像位于旧位置，但卡已移动。即使我改变了屏幕尺寸，我如何修复角落上的图像

结果应该如下所示：

谢谢大家!

#帽子{
宽度：50px；
高度：50px；
位置：绝对位置；
左：420px；
顶部：-25px；
z指数：100；
}

正文
正文

您正试图将绝对图像

#hat

移动到具有绝对值

420px

的左侧属性。如果要将其放置在右角，则必须使用

left:100%

或

right:0

。您还需要

#santabox

是相对的

---

解决方案 我已经在

0

上设置了

top

和

right

帽子的

属性，这意味着我已经将它放在了右上角。之后，我应用了
transform:translate（50%，-50%）
将其移动到自身大小的50%（将其居中到右上角），我通过设置
相对位置
类使
#santabox
相对


#帽子{
宽度：50px；
高度：50px；
位置：绝对位置；
右：0；
排名：0；
转换：翻译（50%，-50%）；
z指数：100；
}

正文
正文

试试这段代码


#帽子{
浮动：对；
边际上限：0px；
}

正文
正文