CSS Positioning with nested fixed property

.a{
  position:fixed;
  top:0px;
  left:0px;
  height:100%;
  width:100%;
  background:yellow;
  z-index:1000000

}

.b{
  position:fixed;
  color:green;
  background:pink;
  left:60px;

}

.c{
  position:relative;
 
}

.d{
  position:static;
 
}
<div class="a">

  <div class="b">
  c is overlapping d is not
  </div>
  <span class="c">
overlaping sibling
  </span>
  <span class="d">
  i    am    not a overlapping     sibling
</span>
</div>

Click here for JSFiddle In the above fiddle i have an html please go through it an explain me why<span class="c"> is overlapping on the <div class = "b"> and why <span class="d"> is not overlapping on the <div class = "b"> what is difference between these two spans why is behaving differently?

#html #html5 #css #css3