Html 如何在网站中创建教程覆盖功能？
我想在我的网站上为我的用户创建一个教程功能。我计划在整个屏幕上创建一个黑色的覆盖层，在一个特定的区域，背景是完全透明的，这样用户就可以理解教程所讨论的区域 以下是我所做的：Html 如何在网站中创建教程覆盖功能？,html,css,Html,Css,我想在我的网站上为我的用户创建一个教程功能。我计划在整个屏幕上创建一个黑色的覆盖层，在一个特定的区域，背景是完全透明的，这样用户就可以理解教程所讨论的区域 以下是我所做的： <body> <div> <p>THIS IS CONTENT</p> </div> <div class="overlay"> <div></div> </div>
<body>
<div>
<p>THIS IS CONTENT</p>
</div>
<div class="overlay">
<div></div>
</div>
</body>
.overlay中的div
无效，因为div
的背景位于的顶部。overlay
我认为阻止您的内容div
显示在overlay下的原因是您没有为此指定z-index
。如果您为较大的容器div
指定一个，就像这样：
并给它一个小于覆盖层的z索引（啊，这不是我的意思。“这是内容”不能被黑色背景覆盖，它必须是完全透明的。那么你有没有找到一个好方法？那么问题在哪里？我不能使透明部分。你不能使背景的父级透明，你必须对你想显示在顶部的元素应用更高的z索引。是的，我已经找到了。这就是为什么我卡住了，我需要解决这个问题。
.overlay {
background: rgba(0, 0, 0, 0.5);
position: fixed;
top:0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
}
.overlay > div {
background: rgba(0, 0, 0, 0);
width: 100%;
position: absolute;
height: 30px;
top:0;
left: 0;
}