CSS位置孩子在它的父母之下

时间:2013-10-04 11:39:01

标签: html css css-position

是否可以将子元素(C)置于其父元素(B)下方,并且位于B的邻居元素(C)上方?

描述起来有点困难,你可以看一下例子here

问题是将蓝色div.inner置于红色div.neighbor上方并位于绿色div.outer下方。

举例说明:

enter image description here

HTML code:

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

2 个答案:

答案 0 :(得分:3)

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

答案 1 :(得分:0)

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