小编Jac*_*ack的帖子

我正在根据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/