html - css/html：保持框在页面上的绝对位置

Question

我正在使用使用 html 进行格式化的 anki，但我有点卡住了。我想在我的卡片上画一个盒子，这样我就可以在里面画出我的汉字，但是当我把卡片翻到另一边时，我也希望它“留在页面上的同一个地方”。显然它不会是同一个对象，但我希望我可以使用巧妙的锚定使卡片的正面和背面看起来像盒子在相同的位置。

这就是我现在正在使用的双方。margin-left 和 margin-right 对于使它看起来很好和居中很重要。我尝试了底部：xpx 和位置：固定，但它们似乎没有我想要的效果（盒子一直相对于上面的东西移动，而不是屏幕底部）。

我正在使用的代码

<div style="width:200px; height:200px; margin-left:auto; margin-right:auto; top: 10px; bottom: 10px; border:1px solid #000;""</div>

卡正面

卡背面

如您所见，框相对于其他元素“移动”。

编辑：我创建了一个非常hacky的解决方案，但这适用于我正在尝试做的事情。我只是用一个块将卡片答案侧的所有文本包围起来，这对用户隐藏了它，但保持页面上所有元素的垂直定位相同。有人请回答这个问题，这样未来的开发人员就不会效仿我这个糟糕的例子。

标签： htmlcssanki