html - Image doesn't show up in the absolute position -

i have put image in absolute position. absolute position make overflow hidden, height automatically, , of course, make absolute div inside relative position.

but image showing when change position of absolute relative.

here code:

<div style="position:relative; display:block; overflow:hidden; float:left;">     <div style="position:absolute; overflow:hidden; display:block; top:0; left:0;">         <img src="webbgb.jpg" />     </div> </div> 

---

---

source code

        <ul id="slidehome">             <li><img src="<?php base_url();?>assets/img/webbga.jpg"/></li>             <li><img src="<?php base_url();?>assets/img/webbgb.jpg"/></li>         </ul> 

css

#slidehome {     list-style: outside none none;     padding: 0px;     position: relative;     color: #fff;     font-size: 18px;     float:left; }   #slidehome li {     position: absolute;     top: 0px;     left: 0px;     width: 100%;     background:green;     overflow:hidden;     margin: 0 auto; }   #slidehome li img {     width:100%; } 

js

                        $.noconflict(); jquery( document ).ready(function( $ ) {      var triggers = $('ul#thumnalhome li');     var images = $('ul#slidehome li');     var lastelem = triggers.length-1;     var target;      triggers.first().addclass('active');     images.hide().first().show();      function sliderresponse(target) {         images.fadeout(300).eq(target).fadein(300);         triggers.removeclass('active').eq(target).addclass('active');     }      triggers.click(function() {         if ( !$(this).hasclass('active') ) {             target = $(this).index();             sliderresponse(target);             resettiming();         }     });      $('.next').click(function() {         target = $('ul#thumnalhome li.active').index();         target === lastelem ? target = 0 : target = target+1;         sliderresponse(target);         resettiming();     });     $('.prev').click(function() {         target = $('ul#thumnalhome li.active').index();         lastelem = triggers.length-1;         target === 0 ? target = lastelem : target = target-1;         sliderresponse(target);         resettiming();     });      function slidertiming() {         target = $('ul#thumnalhome li.active').index();         target === lastelem ? target = 0 : target = target+1;         sliderresponse(target);     }      var timingrun = setinterval(function() { slidertiming(); },5000);     function resettiming() {         clearinterval(timingrun);         timingrun = setinterval(function() { slidertiming(); },1000);     } 

});

the reason why make position absolute because slider purpose.

any idea please.

apply

position:fixed; image

 <img style="position:fixed;" src="webbgb.jpg" /> 

and make visible

<div style=" position:relative; display:block; overflow:hidden;  float:left;">     <div style="  position:absolute; overflow:hidden; display:block; top:0; left:0;">         <img style="position:fixed;" src="webbgb.jpg" />     </div> </div>