javascript - 按绝对比固定比相对的顺序显示三个 div

标签 javascript css position fixed absolute

仅在应用程序 (iOS) 而非网站上呈现时我遇到了一些问题: 我必须使用没有任何其他库的纯 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 没有显示重叠的页眉。我该怎么办?

我希望最初用户会先看到封面,然后向上滚动然后看到固定的标题,最后看到内容。

我不想更改 HTML,因为当我将页眉放在内容 div 中时,页眉通常会跳转并在滚动内容 div 时花点时间回到正确的位置。

感谢您的帮助!

最佳答案

也给#content 一个 z-index 属性。比如说,100。

问题看起来像 z-index 上下文。 z-index 不是一个全局值——它是相对于它的父级的。你有带 z-index:99 的#header,它的兄弟#content 带 z-index:auto(为了论证的缘故,说 1)。 #header 总是与#content 及其子项重叠。

关于javascript - 按绝对比固定比相对的顺序显示三个 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44628212/

相关文章:

css - 使用纯 CSS 切换文本显示 :hover pseudo-class

css - 如何使用angular js在css中将ul li设置为事件

css - 如何定位黑莓浏览器?

css - 具有等间距 div 的流体高度

javascript - 如何在 JavaScript 中进行 "raw"字符串搜索和替换,无正则表达式

javascript - Facebook API Javascript JSON 响应

javascript - 尽管 minValue 为 0,google chart api 也会绘制负轴

java - 在多显示器系统中识别正在运行的显示器小程序

CSS:当位置是静态或相对时,我可以将宽度设置为屏幕大小吗?

javascript - Laravel 5.5 jQuery 3.3.1 ajax 不是函数