css - 绝对位置在一个亲戚内，在另一个亲戚之上

Question

问题是:这可能吗？我有一个 div 和 relative position。在这个 div 中，我有另一个 div 带有 position: absolute 和 top: whatever。

这个绝对定位的 div 与父级 div 中的内容重叠没有任何问题，但另一个相对位置 div(在父级之外)甚至不在乎。在这个问题之前，我尽可能多地用谷歌搜索，所以我 90% 确定这是不可能的，或者我走错了路，但我需要确定。

这是一个例子 http://jsfiddle.net/MNLbZ/2/

HTML

<div class="main">
  <div class="content">11112222233</div>
  <div class="abs"></div>
</div>
<div class="main"></div>

CSS

.main {
    background: green;
    position: relative;
    height: 100px;
    width: 100px;
    z-index: 100;
}
.content {
    position: relative;
    z-index: 500;
    width: 100px; 
}
.abs {
    position: absolute;
    width: 50px;
    height: 300px;
    top:0;
    right: 0;
    background: red;
    z-index: 999;
    opacity: .5;
}

Answer 1

第二个.main div 的z-index 必须低于包含绝对div 的第一个div 的z-index:

在第二个main中添加一个类

 <div class="main">
   <div class="content">11112222233</div>
   <div class="abs"></div>
</div>
<div class="main second"></div>

然后使用这种风格:

.second {z-index:99;}

Example