z-index with lower value still appears over other div

Question

Why does VideoDivNote still appear over VideoDiv even though it has a lower z-index? There is some problem using <div> or am I doing something else wrong?

<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>

Answer 1

Thanks to Temani Afif for details explanation. You need to remove z-index from #VideoDiv and use z-index: -1; in #VideoDivNote id. See below or check this 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> 

Answer 2

just make sure that your message div has higher z-index than the other one

 <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>