Question

在下面的html代码中，是否有任何正确的解决方案可以显示＆＃34; popup＆＃34;作为最顶层的元素，而不仅仅是改变弹出式样式？

<style>
.layer_one {
   position :relative;
   z-index : 10;
}
.layer_two {
   position :relative;
   z-index : 5;
}
</style>
<div class="container">
<div class="layer_one"></div>
<div class="layer_two">
  <div class="popup">
  </div>
</div>
</div>

Answer 1

从第1层和第2层取出弹出窗口，您可以将它放在任何您想要的位置。在这种情况下，我添加了z-index：9999（以及第2层的一些颜色，因此您可以看到所有容器）

    <style>
    .layer_one {
       position :relative;
       z-index : 10;
       background : blue;
      width:200px;
      height:200px;
    }
    .layer_two {
      background: green;
       position :relative;
       z-index : 5;
       width: 200px;
       height: 200px;
    }
    .popup{
      background : red;
      width:200px;
      height:200px;
      position : fixed;
      top: 0px;
      left : 0px;
      z-index: 9999;
    }
    </style>
    <div class="container">
    <div class="layer_one">Layer One</div>
    <div class="layer_two">
 
    </div>
         <div class="popup">
         Popup
      </div>
    </div>

Answer 2

我认为只使用CSS并使用您使用过的标记，就无法实现您的目标。

我有两个解决方法：

1。如果你可以稍微修改标记;

像这样：

  <div class="container">

    <div class="layer-1">
      Layer 1
    </div><!-- .layer-1 -->

    <div class="layer-2">
      Layer 2
    </div><!-- .layer-2 -->

    <div class="pop-up">
      Pop-up
    </div><!-- .pop-up -->

  </div><!-- .container -->

由于我们的HTML对于这个特殊情况的问题变得更加简单;现在很容易将弹出框放在两层上。

/* Layer #1 */
.layer-1 {
  z-index: 1100;
  background-color: blue;
}

/* Layer #2 */
.layer-2 {
  z-index: 1000;
  background-color: green;
}

/* Pop-up box */
.pop-up {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1300;
  background-color: red;
}

/* Common styles */
.layer-1,
.layer-2 {
  position: relative;
}

.layer-1,
.layer-2,
.pop-up {
  height: 200px;
  width: 200px;
  color: #ccc;
}

Codepen：http://codepen.io/rahul_arora/pen/yMoyKM

2。如果您无法触摸标记

如果您被允许使用JavaScript，您可以在不触及标记甚至CSS的情况下实现这一目标。以下是将.popup div移动到顶部的JavaScript：

var container = document.querySelector('.container'), // Reference to the .container div
    layer_one = document.querySelector('.layer_one'), // Reference to the .layer_one div
    popup = document.querySelector('.popup'); // Reference to the .popup div

container.insertBefore(popup, layer_one); // Move .popup just above .layer_one
popup.style.zIndex = "2000"; // Increase the z-index to show the .popup floating over others

我有一个有效的代码工具：http://codepen.io/rahul_arora/pen/QpMwvy

希望能为您解决问题。干杯！

从dom相对较低的z-index显示顶部的内容？

2 个答案:

1。如果你可以稍微修改标记;

2。如果您无法触摸标记