是否可以将子元素(C)置于其父元素(B)下方,并且位于B的邻居元素(C)上方?
描述起来有点困难,你可以看一下例子here。
问题是将蓝色div.inner
置于红色div.neighbor
上方并位于绿色div.outer
下方。
举例说明:
HTML code:
<div class="neighbor"> </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;
}
答案 0 :(得分:3)
<强> 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;
}