CSS - Div / img üzerine div ?

Merhaba arkadaşlar;



Yukarıdaki çizimde de anlattığım gibi
1 div var ve bu div içerisinde bulunan img yi kapsayıcı özelliğe sahip. (gri alan img)

örnek verecek olursak
<div id=container>
<img ---- />
<div id=footbar>Lorem Ipsum...</div>
</div>

Ben bu divin içerisine çizimde gördüğünüz şekilde img nin üstünde duracak şekilde renkli alan gibi belli bir yüksekliğe sahip bir div koymak istiyorum.

Bunu position: relative ile yaptığımızda img yi kapsayan divin alt kısmında boşluk kalıyor. position: absolute ile yaparsak pek sağlıklı olmuyor söz konusu sayfa içeriği değişken olduğu için...

Böyle div nasıl yapabiliriz yardımcı olurmusunuz ?

z-index kullanabilirsin, ama ie6 z-index i bazen sevmiyor.
Yapman gereken container in z-index degerini 1, footbar in z-index degerini ise 2 yapmak. Bunun ardindan margin-top:-20px gibi bir deger ile ic kisimdaki image i istedigin yere koyabilirsin.

Ama bence absolute daha iyi bir cozum.

dediğim gibi relative ile yapınca alt kısımda boşluk kalıyor :S
absolute ile de site içeriği değişken olduğu için yükseklik her zaman aynı olmuyor ve dolayısı ile absolute kullanmak ta sağlıklı olmuyor

tek başına z-index te işe yaramadı :S

z-index dışında css ile yapılamaz gibi.

http://www.jegsworks.com/demos/DemoDHTML/dzindex.htm#images

adresinde bilgi var. Eğer z-index ve css kodlarını img tagını koyduğun ekstra bir div için denersen daha sağlıklıda olabilir.

resmi backgrounda alırsan yapılır

background yapamıyorum çünkü grafik üzerinde bazı işlemler söz konusu büyültme ve küçültme gibi....