通过绝对命令显示三个div比固定比相对

我只在应用程序（iOS）上绘制时没有网站：我有一些问题，我必须使用纯净的Javascript没有任何其他库。通过绝对命令显示三个div比固定比相对

<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时返回正确的位置。

感谢您的帮助！

来源

2017-06-19 Đình Lâm

_“绝对Div没有重叠标题”_你没有告诉它。 --- _“我该怎么做？”_查找_CSS_。 --- _“解构HTML”_这是什么意思？ – evolutionxbox

'z-index'只能与同一父容器中的元素一起使用，因为'header'和'cover'不在同一父元素中，所以它们的z-index不会改变它们的重叠方式。用你当前的结构，你需要将'z-index'放在'content'而不是'cover' –

上，但是我设置的z-index大于header，我只看到没有CSS的header的文本。在这种情况下，封面显示OK。你能推荐一个更好的解决方案吗？由于 –

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

该问题看起来像z-index上下文。 z-index不是全局值 - 它是相对于它的父项。你有z-index：99的#header，它与z-index：auto是同级的#content（参数为1表示）。 #header始终与#content及其子项重叠。

来源

2017-06-19 10:41:22 cheersphilip

当我添加＃内容的Z-index：100，现在显示的顺序是盖>文本内容>头见我的截图： https://gyazo.com/c64087da5e6b590a06619be8116e38c8 –

@ĐìnhLâm你可以发表你的CSS ？这里可能会有几件事情发生。谢谢:) – cheersphilip

您正在使用绝对属性盖类，相对于内容类名，这意味着，它的位置将根据内容类改变。删除相对于属性的内容类，将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>

来源

2017-06-19 10:42:41

我的标题和内容有父div是正文，但是我有很多具有相同结构的html文件，所以我尝试在不更改HTML的情况下找到一种方法。无论如何谢谢:) –

@ĐìnhLâm使用'scroll'事件并根据您的自定义主题更改样式。 –

通过绝对命令显示三个div比固定比相对

回答

相关问题