你如何将左div移到背景？

Question

我正在尝试完成类似于下图的样式，即您的左 div 部分位于右 div 的背景中。 本质上，我希望两个并排的 div 能够相互重叠，一个在后台，一个在前台。

这就是我想要实现的目标：

这是我到目前为止所拥有的：

 .wrapper{ display: grid; width: fit-content; align-items: center; grid-template-columns: 1fr auto; border: solid 2px black; }.left{ width: 150px; height: 115px; background-color: red; border: 2px red solid; z-index:-999; }.right{ width: 120px; height: 150px; background-color: blue; border: 2px blue solid; z-index: 999; }

 <div class="wrapper"> <div class="left"> </div> <div class="right"> </div> </div>

我尝试使用z-index字段无济于事。 此外，除了能够控制背景中的元素之外； 在鼠标 hover 上，我希望背景中的左侧 div “浮动”到前景并部分增加大小，而右侧 div “浮动”到后面并部分减小大小。

我希望我的问题得到了充分的描述，谢谢。

Answer 1

我认为display: grid在这里没有帮助你，因为它试图将子 div 确认为网格（即不重叠）。

我只需将两侧设置为您想要的任何宽度（例如 50%）并使用 z-index 覆盖它们。

.wrapper {
  max-width: 400px;
}

.left, .right {
  width: 50%;
  height: 200px;
  position: absolute;
}

.left {
  background-color: red;
  left: 0;
}

.right {
  background-color: blue;
  right: 0;
  z-index: 99;
  -webkit-box-shadow: -4px 0px 15px -1px #000000; 
   box-shadow: -4px 0px 15px -1px #000000;
}

见https://jsfiddle.net/47bh3eqk/1/