使Square div与右上角对齐，负50px并响应

Question

我家中有这张卡，就像是这样：

<table id="card">
    <td>content</td>
    <td>content></td>
<table>

我希望它固定在屏幕右侧，负50像素；我想那应该像position:fixed; left: calc(100%-50px);。问题是该卡保持在屏幕外，当我缩小时，它会四处移动。

这是它的外观（其余显示在屏幕外）：

这就是我想要的样子：

我认为这是因为CSS将“卡片”的左侧作为参考放置在屏幕的末尾。如果我只放left: calc(90%-50px)之类的东西，则当屏幕尺寸改变时它会水平移动。
我要确定是否完全固定，离边框右上角50px。这可能吗？还是仅使用JavaScript？

Answer 1

不一样：

不要从左侧（指元素的左侧一侧）进行测量，而是从右侧进行测量：

position:fixed; 
right: 50px;

这会将元素的右侧与视口的右边界对齐50px。