https://jsbin.com/mehuyefuqi/6/edit?html,css,js,output


$(function() {
  var $box = $('.box');

  var $ghost = $box.clone();

  var $wrapper = $('<div class="wrapper"></div>');

  $ghost.appendTo($wrapper);

  $wrapper.css({
    backgroundColor: 'rgba(255,255,0,0.1)'
  });

  var offset = $box.position();
  var height = $box.height();
  var width = $box.width();


  $wrapper.css({
    position: 'absolute',
    left: offset.left,
    top: offset.top,
  });

  $ghost.css({
    width: width,
    height: height,
    color: 'red',
    backgroundColor: 'rgba(255,255,255,0.2)'
  });

  $wrapper.insertBefore($box);

  var diff = $ghost.offset().top - $box.offset().top;

  $('.output').text(
    $wrapper.offset().top + " / " +
    $ghost.offset().top + " / " +
    $box.offset().top + " / " +
    "D=" + diff
  );

  $wrapper.css({
    top: parseInt($wrapper.css('top')) - diff
  });

  // alert($wrapper.css('top'));

});





Nochmal neu:
------------


$(function() {

  var $box = $('.box');

  var $ghost = $box.clone();

  var $wrapper = $('<div class="wrapper"></div>');

  $ghost.appendTo($wrapper);

  $wrapper.css({
    backgroundColor: 'rgba(255,255,0,0.1)'
  });

  var offset = $box.position();
  var height = $box.height();
  var width = $box.width();

  $wrapper.css({
    position: 'absolute',
    left: offset.left,
    top: offset.top,
    width: width,
    height: height
  });

  $ghost.css({
    position: 'static', // or relative if it was non-static before
    width: '100%',
    height: '100%',
    left: '',
    top: '',
    right: '',
    bottom: '',
    color: 'red',
    backgroundColor: 'rgba(255,255,255,0.4)'
  });

  $wrapper.insertBefore($box);

  var diff = $ghost.offset().top - $box.offset().top;

  $('.output').text(
    $wrapper.offset().top + " / " +
    $ghost.offset().top + " / " +
    $box.offset().top + " / " +
    "D=" + diff
  );

  $wrapper.css({
    top: parseInt($wrapper.css('top')) - diff
  });

  // alert($wrapper.css('top'));

});