父项下的CSS位置子项 [英] CSS position child under it's parent

问题描述

是否可以将子元素（C）放在其父元素（B）之下，以及B的邻居（C）之上？

描述起来有点困难，您可以观看示例

HTML：

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

CSS：

  .red {
 background-color：红色; 
高度：500像素； 
宽度：500像素； 
 z-index：1； 
} 
 
 .green {
 background-color：green; 
宽度：300像素； 
高度：300像素； 
头寸：固定； 
 top：0像素； 
左：0px； 
 z-index：3； 
} 
 
 .blue {
 background-color：blue; 
宽度：100像素； 
高度：100像素； 
头寸：固定； 
 top：0像素； 
左：250像素； 
 z-index：2； 
} 
  

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

解决方案

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

这篇关于父项下的CSS位置子项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！