html - CSS 位置 child 在它的 parent 之下

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;
}