Javascript z指数问题有两个div，其中一个具有绝对位置

我的问题很简单，我有两个div，其中一个有绝对位置。我将绝对位置div的z-index设置为最低值，另一个设置为最高值，但绝对位置的始终保持在顶部（相反的行为）

这里有一个图像：

这里有代码：

<div style="position:relative;">
    <div style="position:absolute;width:200px;background-color:#ff0;z-index:1;">
          SHOULD BE ON BACK. SHOULD BE ON BACK. SHOULD BE ON BACK.
        SHOULD BE ON BACK. SHOULD BE ON BACK. 
    </div>
    <div style="width:300px;background-color:#0f0;z-index:999999;">
        SHOULD BE ON FRONT. SHOULD BE ON FRONT.
        SHOULD BE ON FRONT. SHOULD BE ON FRONT.
    </div>
</div>

应该在后面。应该在后面。应该在后面。
应该在后面。应该在后面。
应该在前面。应该在前面。
应该在前面。应该在前面。

看看下面的JSFIDLE：

添加

位置：绝对位置

注意：仅影响具有非
静态值的元素（默认值）



应该在后面。应该在后面。应该在后面。
应该在后面。应该在后面。
应该在前面。应该在前面。
应该在前面。应该在前面。
您需要去掉父div中的样式，并将样式添加到前div中。将
位置：relative
添加到“THIS SHOULD ON front”

因此：


应该在后面。应该在后面。应该在后面。
应该在后面。应该在后面。
应该在前面。应该在前面。
应该在前面。应该在前面。

注：z索引仅适用于定位元素（位置：绝对、位置：相对或位置：固定）。
-W3学校，来自

将第二个div更新为

<div style="position:relative;width:300px;background-color:#0f0;z-index:999999;">
    SHOULD BE ON FRONT. SHOULD BE ON FRONT.
    SHOULD BE ON FRONT. SHOULD BE ON FRONT.
</div>


应该在前面。应该在前面。
应该在前面。应该在前面。

Z-index仅在DIV有一个位置集（相对、绝对、固定等）时才适用-因此两个DIV都需要一个位置，而不仅仅是一个位置。
您的标记应该是这样的

<div style="position:relative;">
    <div style="position:absolute;width:200px;background-color:#ff0;z-index:1;">
          SHOULD BE ON BACK. SHOULD BE ON BACK. SHOULD BE ON BACK.
        SHOULD BE ON BACK. SHOULD BE ON BACK. 
    </div>
    <div style="position:relative;width:300px;background-color:#0f0;z-index:2;">
        SHOULD BE ON FRONT. SHOULD BE ON FRONT.
        SHOULD BE ON FRONT. SHOULD BE ON FRONT.
    </div>
</div>


应该在后面。应该在后面。应该在后面。
应该在后面。应该在后面。
应该在前面。应该在前面。
应该在前面。应该在前面。

检查此更新的
给你。。。
应该在前面而不是绝对的，并且在前面：P

<div style="position:relative;">
  <div style="position:absolute;width:200px;background-color:red;z-index:1;">
    SHOULD BE ON BACK. SHOULD BE ON BACK. SHOULD BE ON BACK. SHOULD BE ON BACK. SHOULD BE ON BACK.
  </div>
  <div style="width:300px;background-color:yellow;z-index:2;position: relative;">
    SHOULD BE ON FRONT. SHOULD BE ON FRONT. SHOULD BE ON FRONT. SHOULD BE ON FRONT.
  </div>
</div>


应该在后面。应该在后面。应该在后面。应该在后面。应该在后面。
应该在前面。应该在前面。应该在前面。应该在前面。
将第二个div位置设置为绝对位置

<div style="position:absolute;width:300px;background-color:#0f0;z-index:999999;">



最终代码如下所示

<div style="position:relative;">
    <div style="position:absolute;width:200px;background-color:#ff0;z-index:1;">
          SHOULD BE ON BACK. SHOULD BE ON BACK. SHOULD BE ON BACK.
        SHOULD BE ON BACK. SHOULD BE ON BACK. 
    </div>
    <div style="position:absolute;width:300px;background-color:#0f0;z-index:999999;">
        SHOULD BE ON FRONT. SHOULD BE ON FRONT.
        SHOULD BE ON FRONT. SHOULD BE ON FRONT.
    </div>
</div


应该在后面。应该在后面。应该在后面。
应该在后面。应该在后面。
应该在前面。应该在前面。
应该在前面。应该在前面。
您可以将第一个div的z-index更改为-1，或将
位置：相对
或
位置：绝对
添加到第二个div。
该死，你打败了我！我需要前面的div没有位置：绝对，这对我来说是必须的：（@nightclub，你可以申请
position:relative；
@nightclub查看我的解决方案：）人造丝，请确保发布报价的来源，然后重试
<div style="position:relative;">
    <div style="position:absolute;width:200px;background-color:#ff0;z-index:1;">
          SHOULD BE ON BACK. SHOULD BE ON BACK. SHOULD BE ON BACK.
        SHOULD BE ON BACK. SHOULD BE ON BACK. 
    </div>
    <div style="position:absolute;width:300px;background-color:#0f0;z-index:999999;">
        SHOULD BE ON FRONT. SHOULD BE ON FRONT.
        SHOULD BE ON FRONT. SHOULD BE ON FRONT.
    </div>
</div