結論:バグがあるのはDemo-4の場合です。

Demo-1:

2つのdivの親要素が同じ場合、
単純にz-indexの値が大きい方が前面に表示されます。
すべてのブラウザで同じ結果になります。

.contentA
  position: relative;
.contentA .box1
  position: absolute;
  z-index: 500;
	
.contentA .box2
  position: absolute;
  z-index: 200;
	
Demo-2:

2つのdivの親要素が別々でz-indexも違う場合、
親要素のz-indexの順になります。
すべてのブラウザで同じ結果になります。

.contentB
  position: relative;
  z-index: 10;
.contentB .box1
  position: absolute;
  z-index: 500;
	
.contentC
  position: relative;
  z-index: 1000;
.contentC .box2
  position: absolute;
  z-index: 200;
	
Demo-3:

2つのdivの親要素が別々でz-indexが同じ場合、
後から出現した親要素が手前になります。
すべてのブラウザで同じ結果になります。

.contentD
  position: relative;
  z-index: 10;
.contentD .box1
  position: absolute;
  z-index: 500;
	
.contentE
  position: relative;
  z-index: 10;
.contentE .box2
  position: absolute;
  z-index: 200;
	
Demo-4:

2つのdivの親要素が別々でz-indexは指定しない場合、
IE6とIE7以外のブラウザは子要素のz-indexの値が優先されるが、
IE6とIE7は親要素の出現順が影響します。

後から出現した親と子要素が手前になります。

.contentF
  position: relative;
  z-index を指定しない
.contentF .box1
  position: absolute;
  z-index: 500;
	
.contentG
  position: relative;
  z-index を指定しない
.contentG .box2
  position: absolute;
  z-index: 200;