为什么 VideoDivNote
仍然出现在VideoDiv
即使它的 z-index 较低?使用 <div>
时出现问题或者我在做什么
还有错吗?
<style>
#VideoDiv
{position: absolute;
left: 3%;
bottom: 5%;
z-index: 999;
background-color: #DCDCDC;
height: 260px;
width: 424px;
text-align: center;
border: 1px solid #d3d3d3;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
#VideoDivNote
{height: 30px;
position: relative;
width: 300px;
margin: auto;
left: 0px;
right: 0px;
bottom:0px;
background-color: rgba(8, 8, 8, 0.7);
-webkit-border-radius: 0px 0px 15px 15px;
-moz-border-radius: 0px 0px 15px 15px;
border-radius: 0px 0px 15px 15px;
z-index: 1;
}
#VideoMessage
{color: #fff;
font-family: acme;
position: relative;
bottom: -6px;
z-index: 2;
}
</style>
<div id="VideoDiv">
<div id="VideoPlayer"></div>
<div id="VideoDivNote"><span id="VideoMessage">z-index not working</span></div>
</div>
最佳答案
感谢 Temani Afif 的详细解释。 您需要从 #VideoDiv 中删除 z-index 并使用 z-index: -1;在#VideoDivNote id 中。请参阅下文或查看此 link
#VideoDiv
{position: absolute;
left: 3%;
bottom: 5%;
background-color: #DCDCDC;
height: 260px;
width: 424px;
text-align: center;
border: 1px solid #d3d3d3;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
#VideoDivNote
{height: 30px;
position: relative;
width: 300px;
margin: auto;
left: 0px;
right: 0px;
bottom:0px;
background-color: rgba(8, 8, 8, 0.7);
-webkit-border-radius: 0px 0px 15px 15px;
-moz-border-radius: 0px 0px 15px 15px;
border-radius: 0px 0px 15px 15px;
z-index: -1;
}
#VideoMessage
{color: #fff;
font-family: acme;
position: relative;
bottom: -6px;
z-index: 2;
}
<div id="VideoDiv">
<div id="VideoPlayer"></div>
<div id="VideoDivNote"><span id="VideoMessage">z-index not working</span></div>
</div>
关于html - 具有较低值的 z-index 仍然出现在其他 div 之上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54649112/