两个元素，在使用非static定位 且 z-index都设置的情况下，较大的z-index元素没有覆盖较小的那个，会是什么原因？

问题遇到的现象和发生背景

这两个元素不是同级，用的是绝对定位，挨在一起了，并没有覆盖。

问题相关代码，请勿粘贴截图

两个元素都设置了绝对定位;
其中一个元素是下拉框，z-index是100；
另一个元素是左侧栏，z-index是1。

运行结果及报错内容

我的解答思路和尝试过的方法

我想要达到的结果

我想要下拉框出现时，覆盖下面的左侧栏，而不是图片那样。

嵌套元素无层级关系，只有兄弟（同级）元素才有层级关系