Z-index 可能是我的 JS 引起的问题

Question

在这个用 Twitter 制作的页面上 bootstrap：（link 已删除）

我有一个 div，里面有一个 javascript 运行ning，打印文本行，就好像有人在页面上打字一样。让我们称之为 div 一个。在这个 div 之上，我还有另一个 div（我们称这个 div 两个），它有我的网页标题。

我想要 div 两个在 div 一个之上，它们是。问题是 div 中模拟某人打字的 JS 将 div 向下推了两个。我希望 divs 彼此重叠，而 JS 则运行而不是将 div 向下推两个。

问题是，无论我如何使用z-index，我似乎都无法解决这个问题。如果我使用绝对定位，div 会被推到我的菜单按钮之上，我无法单击它们来使用网页。

这是我的 div 结构：

<div class="container-fluid" style="height:80%; overflow:hidden;" id="panel1">
 <div class="type-wrap">
            <span id="typed" style="white-space:pre; font-size:20px; z-index:0; width:100%; overflow:hidden; font-size:30px;"></span>
        </div>

    <div class="site-wrapper" style="z-index:1;" >




      <div class="site-wrapper-inner" style="z-index:2;">

        <div class="cover-container" style="z-index:3;">

  <div class="inner cover" style="z-index:4">
          <center>  <h1 class="cover-heading" id="name" style="color:blue; z-index:1060;">Julie Seif
</h1>
            <p class="lead" id="tagline">Web Development & Design</p> 


            </center>
          </div>
</div>
</div>
</div>
</div>

非常感谢您的帮助。

Answer 1

#panel1 {
    position: relative; /* to contain absolute children, this must be positioned */
}
#typed {
    position: absolute;
}
.site-wrapper {
    position: relative; /* z-index only applies to positioned elements */
    z-index: 1;
}

Z-index 可能是我的 JS 引起的问题

Z-index issue which may be caused by my JS

html

css

z-index