overlay a img tag with a div using negative margin-top on the sibling div

问题

I am trying to overlay a img with a div using negative margin on the div, the text inside the div is displayed over the image, while the background of the div is being displayed under the img .

html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="a">
    <div class="b"><img src=""/></div>
    <div class="c">somebody</div>
 </div>
</body>
</html>

css:

.a{
  height:60px;
  background:#ccc;
}

.b img{
  height:60px;
  width:60px;
  background:red;
}

.c{
  background:blue;
  height:20px;
  margin-top:-20px;
}

i have observed this behavior in IE9 and chrome.

is this behavior as expected? if yes, what is the reason?

I could make the div absolute or relative to achieve what i am trying to do, but i am not able to understand this behaviour.

http://jsbin.com/gejuzuza/1/edit