Question

仅在app（iOS）NOT网站上渲染时出现问题：我必须使用纯Javascript而不使用任何其他库。

<div class="header" style="position:fixed; z-index: 99;"></div>
<div class="content" style="position:relative">
  <div class="cover" style="position:absolute; z-index:999;"></div>
   //some text content
</div>

Cover div没有显示重叠标题。我能做些什么呢？

我希望最初用户首先看到Cover，然后向上滚动，然后看到固定的Header，最后是内容。

我不想更改HTML，因为当我在内容div中添加标题时，标题通常会跳转并在滚动内容div时花一些时间来支持正确的位置。

感谢您的帮助！

Answer 1

给#content一个z-index属性。说，100。

问题看起来像z-index上下文。 z-index不是全局值 - 它相对于它的父级。你有#header和z-index：99，它的兄弟#content with z-index：auto（比如说1为了参数＆＃39; s）。 #header始终与#content及其子项重叠。

Answer 2

您使用绝对属性覆盖类，相对于内容 className，这意味着，它的位置将根据内容类进行更改。将 relative 属性移除到内容类，将wrapeer添加到所有标头和内容className。

<div style="position:relative">
      <div class="header" style="position:fixed; z-index: 99;"></div>
      <div class="content" >
          <div class="cover" style="position:absolute; z-index:999;"></div>
          //some text content
      </div>
</div>

按绝对顺序显示三个div而不是相对于固定

2 个答案: