你如何將左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/