Why CSS position absolute image doesn't show up?

Question

My main container has position relative, and I want to overlay 2 images on each other.

When I add position absolute to one of my div's, it just disappears.

I try to use positioning top left right etc. I attached image how it suppose to look.

How it suppose to look

And here is my code

  <div style="position: relative;">
    <div style="background: url('http://i.imgsafe.org/8797eaa.png') no-repeat; background-size: 100% auto; height: 709px;margin-top: 70px"></div>
    <div style="background: url('http://i.imgsafe.org/8ab6260.png') no-repeat; background-size: 100% auto; height: 170px;position: absolute; top:0; left: 0"></div>
  </div>

Any suggestions?

Answer 1

Use

width:100%

for the image having position absolute will absolutely solve your problem ;)

here is fiddle free for you ^^

http://jsfiddle.net/sxbo705L/1/