时间戳

首页 > 解决方案 > 如何将 div 放置在另一个 div 中，并使用现有内容作为背景？z索引问题？

javascript - 如何将 div 放置在另一个 div 中，并使用现有内容作为背景？z索引问题？

问题描述

一个 div（我们称之为“主” div）存在一些内容，我无法控制它的内容，除了知道在其中放置的元素上没有明确的 z-index CSS 设置。但是，我确实可以控制主 div 的 CSS。我想在主 div 中放置另一个 div 作为其背景。你可能会问：为什么不设置master div的背景CSS呢？因为我想在没有master div的css的情况下，选择master div的内容以后保存和恢复。

这是一个简单的案例：

     <div class="master" style="position:relative;z-index:25;">
           abcde <div id="someotherDiv">bla.. bla... bla</div>
     </div>

我想在里面放一个 div 作为它的背景。所以，这就是我尝试过的：

   $('<div class="background" style="position:absolute;width:100%; height:100%;z-index:1;left:0px;top:0px;color:red;"></div>').appendTo('.master');

当我这样做时，它会隐藏字符串“abcde”，因为绝对定位的“背景”div 放在它上面。

z-index 并不像看起来那么简单……堆叠顺序，继承自容器 div，需要“定位”都在其中发挥作用。我尝试了许多其他方法，但无济于事。

标签： javascriptjqueryhtml

解决方案

对背景容器使用负 z-index 应该可以工作。

    <div class="master">
      abcde<div id="someotherDiv">bla.. bla... bla</div>
      <div class="background"></div>
    </div>



    .master {
      position: relative;
      z-index: 25;
    }

    .background {
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: -1;
      left:0;
      top: 0;
      background: yellow;
    }

https://codepen.io/anon/pen/zgxbNG

推荐阅读