jquery - How to position a div relative to img without a parent div wrapping the img -

i writing little jqueryplugin preloading images statusbar each image.

the statusbar should centered horizontally , vertically above each image.

as should plugin don't want user need wrap each image relative positioned div in order position div relative img. using cms user might not able change way image being output.

so don't want this:

<div style="position: relative">   <img src="" />   <div style="position: absolute, ...">100% loaded</div> </div> 

what want is:

  <img src="" />   <div style="position: absolute, ...">100% loaded</div> 

i tried place div right behind image jquery, setting position relative , place div right inside div positioned absolute. might work cases, depends on css of img... floated or not etc.

does css- or jquery-guru got suggestions me? :-)

cheers

this wrap imgs , remove wrapper when images loaded.

$('img').each(function () {    var $img = $(this),       $percentloaded = $('<span class="percent-loaded">');    $img.wrap('<span class="preloader">');    $img.parent().append($percentloaded);    $img.on('load', function () {     $percentloaded.fadeout(5000);     $img.unwrap();   });  }); 

then css this:

.preloader {   position: relative;   display: inline-block; }  .preloader .percent-loaded {   position: absolute;   top: 0;   bottom: 0;   right: 0;   left: 0;   background-color: rgba(255, 0, 0, 0.5) } 

here demo: http://jsbin.com/jesuneqo/1/edit