Question

我创建了一个占据整个视口的div，希望用户向下滚动以查看更多内容，但在div之后，当我创建h1代码时，标题为被div重叠。

我做错了什么？

链接到JSFiddle - https://jsfiddle.net/cycse638/3/ 我希望这样 - Result expected

Answer 1

关于position:absolute

正如@Mers所述，当您将position:absolute设置为元素时，该元素将从正常流程中取出。因此，它下面的所有其他项目将被定位为它们之上没有任何东西（结果：这些项目被推到文档中 - 在你的情况下H1将你自己推到你的#background下面）。

因此，您需要{＃1}}（通常是默认值），用于#background，以便它与页面中的其他元素一起流动（因为您说要滚动）到你的H1）。

您说position:relative

如果您希望上部div正好是视口的高度，则使用100vh而不是100％作为您的高度。不同之处在于，100％将使其占用所有可用空间（即所有内容），而后者仅使其占用的长度等于可用屏幕（即不是整个文档）。

编辑小提琴

好。所以，这是你修改过的小提琴：

https://jsfiddle.net/cycse638/5/

...考虑到上述几点，修改了CSS。转到小提琴，然后向下滚动示例输出，您将看到它看起来像您发布的here。

注意：您可以忽略我在H1中放置的弹性规则。他们在那里，以便它看起来像图中的那个。重要的是你的#background是相对的，高度为100vh。

希望这有帮助！

Answer 2

你可以使用z-index来降低和提高每个元素或改变div的不透明度，这仍然会使标题模糊到一定程度。或者你可以简单地将标题标记放在div中：<div id="background"><h1>weadfs</h1></div>

#background {
  display: block;
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  background: #eee;
  z-index: -1;
}

h1 {
  z-index: 1;
}

<div id="background"></div>
<h1>weadfs</h1>

#background {
  position: relative;
  height: 100vh;
  width: 100vw;
  background: green;
}

<div id="background"></div>
<h1>weadfs</h1>

#background {
  z-index: -1;
  position: fixed;
  height: 100vh;
  width: 100vw;
  background: green;
}

h1 {
  height: 90vh;
  position: relative;
  top: 200vh;
}

<div id="background"></div>
<h1>weadfs</h1>

DIV重叠内容

2 个答案: