当我的拖放事件开始时,我需要覆盖一个子div来覆盖它的父div,但我无法使用z-index将子div放在父级之上.

这是我的HTML:

  

    

      
This should be over the parent
    
    
Some text lorem ipsum
  

  

    
lorem ipsum
  

这是我的CSS

html, body {
  height: 100%;
  width: 100%;
}

.some-element {
  background-color: blue;
  width: 100%;
}

.parent-div {
  background-color: red;
  height: 100%;
  position: relative;
  width: 100%;
  z-index: 1;
}

.child-div {
  background-color: green;
  height: 100%;
  position: relative;
  width: 100%;
  z-index: 999;
}

这是CodePen演示我的问题:https://codepen.io/leofontes/pen/LkgJpo

我认为通过使用z-index和位置相对我可以实现我想要的,但它似乎没有堆叠在父级之上.对于发生了什么有什么想法？

用于.child-div改变定位absolute.

.child-div {
  background-color: green;
  height: 100%;
  position: absolute;
  width: 100%;
  z-index: 999;
}

html,
body {
  height: 100%;
  width: 100%;
}
.some-element {
  background-color: blue;
  width: 100%;
}
.parent-div {
  background-color: red;
  height: 100%;
  position: relative;
  width: 100%;
  z-index: 1;
}
.child-div {
  background-color: green;
  height: 100%;
  position: absolute;
  width: 100%;
  z-index: 999;
}

  

    

      
This should be over the parent
    
    
Some text lorem ipsum
  

  

    
lorem ipsum