html - 使Square div与右上 Angular 对齐，负50px并响应

我家中有这张卡，有点像：

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

我希望将其固定在屏幕右侧，减去50px；我想那应该是position:fixed; left: calc(100%-50px);之类的东西。问题是该卡保持在屏幕外，当我缩小时，它会四处移动。

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



这就是我想要的样子：



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

最佳答案

换个思路：

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

position:fixed;
right: 50px;

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

关于html - 使Square div与右上 Angular 对齐，负50px并响应，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54648725/