z-индекс с более низким значением все еще появляется над другим div

Question

Почему 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>

Answer 1

Спасибо Temani Afif за подробное объяснение.Вам нужно удалить z-index из #VideoDiv и использовать z-index: -1;в #VideoDivNote id.Смотрите ниже или проверьте эту ссылку

    #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

просто убедитесь, что ваш div имеет более высокий z-индекс, чем другой

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