如何将div(text(部分修复为滚动时不重叠黑框？我正在尝试做一个投资组合来练习，但似乎找不到解决这个问题的方法
.box {
width: 100%;
height: 70px;
background: black;
display: flex;
position: fixed;
}
.overl {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 25px;
color: yellow;
}
.space {
position: relative;
top: 800px;
overflow: hidden;
width: 1600px;
height: 900px;
}<div class="box">
</div>
<div class="overl">
<h2>Overlapped</h2>
</div>
<div class="space">
</div>您可以给.box一个高于0的z-index值。这样，当滚动时，另一个div(使用0，因为这是默认值(会保持在它下面。
演示：
.box {
width: 100%;
height: 70px;
background: black;
display: flex;
position: fixed;
z-index: 1;
}
.overl {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 25px;
color: yellow;
}
.space {
position: relative;
top: 800px;
overflow: hidden;
width: 1600px;
height: 900px;
}<div class="box">
</div>
<div class="overl">
<h2>Overlapped</h2>
</div>
<div class="space">
</div>您已将位置设置为固定：请尝试此CSS。我把你的.box位置改成了绝对位置。这是你想要的吗？
.box {
width: 100%;
height: 70px;
background: black;
display: flex;
position: absolute;
}
.overl {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 25px;
color: yellow;
}
.space {
position: relative;
top: 800px;
overflow: hidden;
width: 1600px;
height: 900px;
}<div class="box">
</div>
<div class="overl">
<h2>Overlapped</h2>
</div>
<div class="space">
</div>您可以应用
z-index: -1;
到文本(覆盖(或
z-index: 1;
至黑盒(盒(
在css文件中，对于box类，只需将z索引添加为1。
.box {
width: 100%;
height: 70px;
background: black;
display: flex;
position: fixed;
z-index: 1;
}
.overl {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 25px;
color: yellow;
}
.space {
position: relative;
top: 800px;
overflow: hidden;
width: 1600px;
height: 900px;
}
<!Doctype html>
<html>
<head>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="box">
</div>
<div class="overl">
<h2>Overlapped</h2>
</div>
<div class="space">
</div>
</body>
</html>
这是相同的代码。
z指数
请参阅上面的链接，了解什么是z索引。