在其父母下的CSS職位的子女

Question

是否有可能將子女（C）放在其父母（B）之下，以及B的鄰居（C）之下？

這有點難以描述，你可以看例子here。

問題是將藍色div.inner定位在紅色div.neighbor以上並且綠色div.outer下。

爲了說明：

HTML代碼：

<div class="neighbor">&nbsp;</div> 
<div class="outer"> 
    <div class="inner"></div> 
</div> 

CSS代碼：

.neighbor{ 
background-color: red; 
height: 500px; 
width: 500px;  
} 

.outer{ 
background-color: green; 
width: 300px; 
height: 300px; 
position: fixed; 
top: 0px; 
left: 0px;  
} 

.inner{ 
background-color: blue; 
width: 100px; 
height: 100px; 
position: fixed; 
top: 0px; 
left:250px;  
} 

Answer 1

JsFiddle

HTML：

<div class="red"></div> 
<div class="green"></div> 
<div class="blue"></div> 

CSS：

.red { 
    background-color: red; 
    height: 500px; 
    width: 500px; 
    z-index: 1; 
} 

.green { 
    background-color: green; 
    width: 300px; 
    height: 300px; 
    position: fixed; 
    top: 0px; 
    left: 0px; 
    z-index: 3; 
} 

.blue { 
    background-color: blue; 
    width: 100px; 
    height: 100px; 
    position: fixed; 
    top: 0px; 
    left: 250px; 
    z-index: 2; 
} 

Answer 2

.neighboor { 
     background-color: red; 
     height: 500px; 
     width: 500px; 
     position:fixed; 
     z-index:-200; 
    } 

    .outer { 
     background-color: green; 
     width: 300px; 
     height: 300px; 
     position: absolute; 
     top: 0px; 
     left: 0px; 
    } 

    .inner { 
     background-color: blue; 
     width: 100px; 
     height: 100px; 
     position:relative; 
     z-index: -100; 
     top: 0px; 
     left: 250px; 
    }