无论屏幕大小如何，使div出现在相同位置

Question

我正在根据Google的材料设计（即大量使用卡片）为客户开发网站。

我想要的是让页面的第一张卡片在浮动操作按钮的中点不断在屏幕底部的上方不断窥视，如下图所示。

我的问题是，当以不同的屏幕分辨率在不同的设备上查看网站时，此方法无法正常工作。我尝试使用百分比和em从顶部填充此卡，但这些操作均失败，因此该卡会更改位置。我剩下的选择是使用媒体查询，但这可能会令人费解。

以下是该卡当前存在的CSS：

#content-card
{
    position: relative;
    display: table;
    background-color: white;  
    top: 0;
    left: 0;
    right: 0;    
    width: 100%; 
    overflow: hidden;
    box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3);
    z-index: 2;
    height: auto;
 }

欢迎提供任何有关如何实现理想效果的建议和见解。

谢谢 ：）

按要求基本jfiddle实现： - https://jsfiddle.net/7fudv084/1/

Answer 1

使用vw（视口宽度）代替百分比。1vw =视口宽度的1/100-与设备PPI等无关。因此，如果希望div与设备大小和屏幕分辨率无关而保持成比例的固定，请使用VW设置水平轴位置。

例：

.somediv{ margin-right:20vw}