CSS position child under it's parent

问题

Is it possible to position child element (C) under its parent (B), and above B's neighbor (C)?

It's a little bit difficult to describe, you can watch example here.

The question is to position blue div.inner above red div.neighbor AND under green div.outer.

To illustrate:

HTML code:

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

CSS code:

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

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

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

来源：https://stackoverflow.com/questions/19180281/css-position-child-under-its-parent

标签

html

css

css-position