css - 如何将 DIV2 带到顶级 WRT DIV1？

Question

我正在尝试将 DIV2 置于 DIV1 之上，我已经关注了几个较早的问题，但似乎没有解决我的问题。

这里是对应的 DIV 元素，后面跟着它们的 CSS。

这就是我指的 DIV1

 <div class="left_black_out"><img alt=" close" src="./img/slider_in.png" style="background:none rgba(255,255,255,0.8); opacity:.3">
      <div class="world" >
        <h2>WORLD ABOVE THE WORLD</h2>
        <p>THIS IS IN TOP</p>
        </div>
    </div>

这是 DIV2

<div class="disclaimer4" id="basic-modal-content">
  <h3>Disclaimer</h3>
  <p>Want this on TOP</p>
</div>

对应的CSS

.left_black_out {
    background:none rgba(0, 0, 0, 0.8);
    zoom:1;
    bottom: 0;
    display: block;
    height:100%;
    left: -660px;
    top:30px;
    padding: 100px 60px 30px;
    position: absolute;
    width: 800px;
    z-index: 9990;
    /*overflow:hidden;*/
    float: left;    
    margin-top:-30px;   
}

.disclaimer4 {
    position: absolute;
    opacity: .99
    z-index: 9999;
    overflow:hidden;
    float: left;    
}

如果我将位置更改为“相对”，DIV1 将完全消失。我已经为 DIV2 的 z-index 尝试了不同的值，包括负值。仍然无法将其置于首位。这是如何实现的。

Answer 1

试试这个

.left_black_out {
    background:none rgba(0, 0, 0, 0.8);
    zoom:1;
    bottom: 0;
    display: block;
    height:100%;
    left: -660px;
    top:30px;
    padding: 100px 60px 30px;
    position: absolute;
    width: 800px;
    float: left;    
    margin-top:-30px; 
    z-index:0;
}

.disclaimer4 {
    position: absolute;
    overflow:hidden;
    float: left; 
    background:#fff;
    z-index:1;
    opacity:0.9;
}

http://jsfiddle.net/a3WSm/4/