为什么VideoDivNote
仍然出现在VideoDiv
上,即使它的z指数较低?使用<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>
只需确保您的消息div具有比另一个更高的z-index
<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: 1000;
}
</style>
<div id="VideoDiv">
<div id="VideoPlayer"></div>
<div id="VideoDivNote"><span id="VideoMessage">z-index not working</span></div>
</div>