divを画面のサイズに関係なく同じ位置に表示する

Question

私は、Googleのマテリアルデザイン（つまりカードの大量使用）に基づいてクライアント用のウェブサイトを開発しています。

私が望むのは、ページの最初のカードを、下の画像のようなフローティングアクションボタンの半分の点で画面のすぐ上に常に覗かせることです。

私の問題は、サイトが画面解像度と異なるデバイス上で表示されているときに、これはうまく動作しないということです。私はパーセンテージを使用しようとしましたが、このカードを上から埋めていますが、これらは失敗し、カードの位置が変わります。私の残りの選択肢は、メディアクエリを使用することですが、これは潜在的に複雑であることが判明します。それが現在存在しているとして、次の

は、カードの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}