Question

在这个用twitter bootstrap制作的页面上:(已删除链接）

我有一个运行javascript的div，可以打印文本行，就像有人在页面上输入一样。我们称之为div。在这个div的顶部，我有另一个div（让我们称之为div二），它具有我的网页标题。

我希望div 2位于div之上，他们是。问题在于，模拟某人打字的div中的JS将div二推下来。我希望div在彼此之上并且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造成的

1 个答案: