css - 将绝对元素放在同级下

Question

我想在它的同级下放置一个自定义按钮元素，这样同级的阴影效果将在按钮上可见。目前阴影在按钮上不可见，但在它下面。查看代码片段以更好地理解我的意思:

.parent {
  position: absolute;
}

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

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

<div class="parent">
  <div class="box"></div>
  <div class="button">x</div>
</div>

Answer 1

将 position: relative; 应用到 .box 以便它支持 z-index 值而不影响布局。

.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;
}