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

Question

I have to put an image in the absolute position. This absolute position I make overflow hidden, so that it will height automatically, and of course, I make this absolute div inside the relative position.
But image only showing up when I change the position of absolute into relative.
Here is my 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 I make this position absolute is because this is for slider purpose.
Any idea please.

Answer 1

it will not show up because of
overflow:hidden;
and not because of your position

Answer 2

apply
position:fixed; into your image
<img style="position:fixed;" src="WEBbgB.jpg" />
and that could make it 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>