在绝对定位的元素上使用伪元素作为盒子阴影

Question

我正在网站的搜索字段上使用jQuery UI的自动完成功能。

此“ ui-autocomplete”元素的核心CSS已经将位置设置为绝对位置，并将z-index设置为700（左和右均为0）。我不想修改此文件，因为它会干扰自动完成元素的放置。

我想添加一个有创意的盒子阴影来将该元素与网站的其余部分区分开，但是我看到的每一个使用了before和/或after伪元素的教程都将父元素设置为相对位置，伪元素为绝对值。

当父级和子级都处于绝对位置时，是否可以正确地重新堆叠伪元素的z-index？

这是一个例子：

.foo {
   position: absolute;
   width: 300px;
   height: 300px;
   background: #fff;
   top: 50px;
   left: 50px;
   z-index: 700;
}

.foo::before, .foo::after {
   position: absolute;
   content: '';
   bottom: 0;
   width: 96%;
   height: 1%;
   left: 2%;
   z-index: -1;
   box-shadow: 0 0 40px 13px #486685;
   border-radius: 100px/5px;
}

<div class="foo">This is my Div</div>

不幸的是，使用这种方法，伪元素出现在其父div上方，而不是在-之下，这是我试图实现的目标。