html - 使正方形 div 与右上角对齐，减去 50px 并响应

Question

我的 dom 里有这张卡片，它是这样的:

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

我希望它固定在屏幕右侧，减去 50px；我想应该是 position:fixed;左:计算(100%-50px)；。问题是卡片不在屏幕上，当我缩小时，它会四处移动。

这是它的样子(其余部分在屏幕外):

这就是我想要的样子:

我认为这是因为 CSS 将“卡片”的左侧作为引用放置在屏幕的末尾。如果我只是放置类似 left: calc(90%-50px) 的东西，它会在屏幕尺寸改变时水平移动。
我想要完全固定，右上角，距离边界 50 像素。这可能吗？或者只是通过使用 javascript？

Answer 1

不一样的想法:

不要从左侧(指元素的左侧)测量，而是从右侧测量:

position:fixed; 
right: 50px;

这将使您的元素的右侧与视口(viewport)的右边界对齐 50 像素。