title: Making a div appear at the same position regardless of screen size
body: <p>I am developing a website for a client based upon Google material design (i.e. heavy use of cards).</p>
  
  <p>What I am wanting is to have the first card of the page be constantly peeking just above the bottom of the screen at the half way point of the floating action button like in the image below.</p>
  
  <p><a href="https://i.stack.imgur.com/dOPgG.png" rel="noreferrer"><img src="https://i.stack.imgur.com/dOPgG.png" alt="peeking card"></a></p>
  
  <p>My problem is that this does not work well when the site is being viewed on different devices with screen resolutions. I have tried using percentage and em's to pad this card from the top but these have failed and the card changes position. My remaining option would be to use media queries but this would potentially prove to be convoluted.</p>
  
  <p>The following is the CSS for the card as it currently exists:</p>
  
  <pre><code>#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;
   }
  </code></pre>
  
  <p>Any advice and insight into how I could achieve the desired effect is welcome.</p>
  
  <p>Thanks :)</p>
  
  <p>Basic jfiddle implementation as requested :-
  <a href="https://jsfiddle.net/7fudv084/1/" rel="noreferrer">https://jsfiddle.net/7fudv084/1/</a></p>