html - CSS在其父级下定位子级

Question

是否可以将子元素 (C) 定位在其父元素 (B) 之下，以及 B 的邻居 (C) 之上？

这有点难以描述，您可以在此处观看示例。

问题是将 blue 定位div.inner在 red 上方div.neighbor 和 green 下方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

提琴手

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