Question

有没有办法可以让div“subSect”对div“red”上的文字进行过度填充？我一直在寻找几个小时，但我似乎无法找到答案。我正在使用z-index，但没有什么是真正有效的。我确定我错过了什么。

*{
	margin: 0;
	padding: 0;
}

html, body{
	height: 100%;
}

.sectOne{
	height: 100%;
	background-image: url(images/idea.jpg);
}

.red{
	font-size: 100px;
	position: fixed;
	z-index: 100;
}

.subSect{
	height: 70%;
	position: relative;
	z-index: 50;
}

<!DOCTYPE html>
<html lang="en">
<head>
	<title>Parallax</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="red">
	<p>sample</p>
</div>

<div class="sect sectOne"></div>

<div class="subSect"></div>

<div style="height: 1000px"></div>


</body>
</html>

Answer 1

z-index中的.subSect低于red。.red，如果我理解正确，您不希望能够选择z-index中的文字，所以为此设置了负* { margin: 0; padding: 0; } html, body { height: 100%; } .sectOne { height: 100%; background-image: url(http://lorempixel.com/900/900); } .red { font-size: 100px; position: fixed; z-index: -1; } .subSect { height: 70%; position: relative; z-index: 2; background: rgba(0,0,0,.5) }

＆＃13;

<div class="red">
    <p>sample</p>
  </div>

  <div class="sect sectOne"></div>

  <div class="subSect">asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd </div>

  <div style="height: 1000px"></div>

＆＃13;

String.substring()

＆＃13;

Answer 2

关于z-index的头号规则是，一旦你开始使用它们，你最终会使用很多。

这主要是因为Web开发人员不完全理解它们背后的机制，尤其是堆叠上下文的概念。

堆叠上下文是z-index执行其行为的容器，z-index永远不会突破其堆叠上下文，虽然你当然可以影响堆叠上下文的z排序。

从the MDN article on stacking contexts开始，这是完全创建堆叠上下文的摘要，其中一些是大多数Web开发人员都知道的（例如position: absolute），而其他的不是（例如opacity: 0.999）。

定位并将z-index值分配给HTML元素堆叠上下文（分配非完全不透明度）。
堆叠上下文可以包含在其他堆叠上下文中，并且一起创建堆叠上下文的层次结构。
每个堆叠上下文完全独立于其兄弟姐妹：处理堆叠时，只考虑后代元素。
每个堆叠上下文都是自包含的：在元素的内容之后堆叠，整个元素被认为是堆叠顺序父级堆叠上下文。

在您的示例中，针对预期z排序的权力是您尝试影响的元素都在同一堆叠上下文中（<html>是第一个也是最重要的堆叠上下文，始终存在）和z-indices或.red（z-index: 100）和.sectOne（z-index: 50）都只是错误的顺序。

事实上，如果你完全放弃干扰z-index，那么HTML语法的“自然顺序”本身就非常愿意完全按你所希望的那样做，以显示固定位置.sectOne上的.red内容。

.red {
    font-size: 100px;
    position: fixed;
}

.subSect {
  height: 70%;
  position: relative;
  /* provide some coloring to see what is going on */
  background-color: #ff0; 
}

A working fiddle来证明这一点。

我所做的只是提供一些视觉辅助来表明 - 确实 - .sectOne已超过.red。

对于手头的问题，人们可以从这个问题推断出，给定的HTML以及你开始篡改z-index的事实，你需要几个内容块在固定元素，为此它应该足以在你想要的元素上提供一些堆叠上下文 -trigger而不是应该在下面传递的元素。

A working fiddle to demonstrate this

什么是正确使用z-index

2 个答案: