Сделайте квадратное деление выровненным по правому верху, минус 50 пикселей и отзывчивым

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 от правой границы области просмотра.