Css 将绝对元素置于同级之下

我想将自定义按钮元素放置在其同级下，以便同级的阴影效果在按钮上可见。当前，阴影在按钮上不可见，但在按钮下可见。请参阅代码片段，以便更好地理解我的意思：

.parent{
位置：绝对位置；
}
.盒子{
宽度：200px；
高度：40px；
背景色：白色；
盒影：1px0px20px0pxRGBA（0,0,0,0.18）；
z指数：10；
}
.按钮{
高度：20px；
宽度：20px；
背景色：白色；
文本对齐：居中；
位置：绝对位置；
右：-20px；
顶部：10px；
z指数：1；
}

x

应用

位置：相对

到

.box

，这样它将支持z索引值，而不会影响布局

.box {
  width: 200px;
  height: 40px;
  background-color: white;
  box-shadow: 1px 0px 20px 0px rgba(0, 0, 0, 0.18);
  position: relative;
  z-index: 10;
}

另一个选项是将.button的

z-index

更改为

-1

。但它可能会在布局中产生其他效果，因为该元素将位于所有其他元素的后面

.button {
  height: 20px;
  width: 20px;
  background-color: white;
  text-align: center;
  position: absolute;
  right: -20px;
  top: 10px;
  z-index: -1;
}