Question

怎么让有定位的div 在另一个相对的div上面，

怎么让有定位的div 在另一个相对的div上面，
如下：

<style type="text/css">
.div1{position: relative;background-color: #FFC;height: 100px;width: 100px;}
.div11{position: absolute;background-color: #6CF;height: 50px;width: 50px;left: 61px;top: 67px;}
.div2{position: relative;background-color: #CCC;height: 100px;width: 100px;}
.div22{position: absolute;background-color: #CF0;height: 50px;width: 50px;}
</style>
<div class="div1">
<div class="div11">div1</div>
</div>
<div class="div2">
<div class="div22">div2</div>
</div>
现在又有新问题，之前的那个解决，
怎么让DIV2上来，然后DIV1还是在最上面~
如下：
<style type="text/css">
.div1{position: relative;background-color: #FFC;height: 100px;width: 100px;}
.div11{
position: absolute;
background-color: #6CF;
height: 50px;
width: 50px;
left: 61px;
top: 67px;
z-index: 10;
}
.div2{
position: relative;
background-color: #CCC;
height: 100px;
width: 100px;
z-index: -1;
}
.div22{position: absolute;background-color: #CF0;height: 50px;width: 50px;}
</style>
<div class="div1">
<div class="div11">div1</div>
</div>
<div style="background-color:#CC9; z-index:-10;">
<div class="div2">
<div class="div22">div2</div>
</div>
</div>

Answer 1

<style type="text/css">

.div1{position: relative;background-color: #FFC;height: 100px;width: 100px;}

.div11{

 position: absolute;

 background-color: #6CF;

 height: 50px;

 width: 50px;

 left: 61px;

 top: 67px;

 z-index: 10;

}

.div2{

 position: relative;

 background-color: #CCC;

 height: 100px;

 width: 100px;

 z-index: 11;

}

.div22{position: absolute;background-color: #CF0;height: 50px;width: 50px;}

</style>

<div class="div1">

<div class="div11">div1</div>

</div>

<div style="background-color:#CC9; z-index:-10;">

<div class="div2">

<div class="div22">div2</div>

</div>

</div>

生div22里的z-index的值比div11里的值大就可以了

Answer 2

这样的问题主要关键是position和z-index的值问题，但是一定要记住无论什么时候子div和父div的关系