cssとｊQueryで画面サイズ変更（PC、スマホなど全デバイスの画面対応）時にposition:absolute要素の上下ポジションを保持

やりたいこと：画面サイズが変更（PC、スマホなど全デバイスの画面対応）時にposition:absolute要素の上下ポジションを保持したい

• サイトの個人紹介ページに個人写真が背景イメージの上に載せする手法がよく利用されます
  • 方法としては、cssで人の顔写真のプロパティ：position:absolute; top:200px などえ設定すればよいです
• ブラウザの幅が固定している場合は、ポジション（top）の固定値指定はできます

問題点：ブラウザ幅の変更（PC、スマホなど全デバイスの画面対応）時に、背景/写真のサイズも幅に応じ変更し、顔写真が背景イメージの上のポジション保持は難しい

• 画面サイズ変更するとcss設定だけで、顔写真のポジションが背景イメージからはみ出されてることが多い
  

解決：ｊQuery＋cssで動的に背景イメージのサイズを取得して顔写真のポジション設定に使用

• 背景イメージのサイズ、画面のトップからの距離などの関係は記事：「コンテンツ表示とスクロール時のアニメ効果」をご参考ください
• $("#obj").offset().top、$("#obj")[0].scrollHeightなどの要素を利用します
• htmlで背景と顔画像の定義：

  <div class="parent">
    <div class="msg"></div>
    <div class="bg-div"><img src="the img uri"/></div>
    <div class="img-div"><img src="the img uri"/></div>
  </div>
  

• cssの定義：

  .parent{
    display:block;
    background-color:red;
  }
  .bg-div{
    display:block;
    position:absolute;
  }
  .bg-div img{
    width:100%;
  }
  .img-div{
    display:block;
  }
  .img-div img{
    position:absolute;
    left: 40px;
    max-width:250px;
    width: 20vw;
  }

• javascriptソース：

  $(window).resize(function(){
    var bg_bottom = $(".bg-div").offset().top + $(".bg-div")[0].scrollHeight;
    var img_height = $(".img-div img")[0].scrollHeight 
    $(".img-div img").css("top", bg_bottom-img_height);
  });

• 実動作サンプル