如何将图像放置在 div 内、右侧和另一个 div 下？

Question

这就是我想要实现的设计：link.

我尝试制作两个单独的 Div，并将一个放置在另一个 Div 之上，但它不起作用。

老实说，我想过将图像作为主 Div 的背景，但这会带来新的问题。但如果这是正确的方法，我会这样做。

老实说我不知道如何找到解决这个问题的方法。

<div class="parent">
   <div class="above">
     <div>Square1</div>
     <div>Square2</div>
     <div>Square3</div>
   </div>
   <div class="under"><img src="....."></div>
</div>



  .parent {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 750px;
    background-color: white;
  }


.under {
    overflow: hidden;
    display: flex;
    align-items: right;
    justify-content: right;
}

.under img {
    width: 100%;
    height: auto;
    align-self: right;
}

.above {
    position: absolute;
}

Answer 1

对于图像，您可以

position

它

absolute

与

right:0

和

top:-50px

当然，所有这些都与

relative

.parent

相关。给它一个比其他方块低

z-index

的值，它将出现在它们下方。

这是一个快速草图。

.parent {
  position: relative;
  width: 400px;
  height: 150px;
  border: 1px solid green;
  overflow: hidden;
}

.above {
  display: flex;
  width: 100%;
  justify-content: space-around
}

.above>div {
  background: red;
}

.under {
  position: absolute;
  right: 0;
  top: -50px;
  bottom: -50px;
  z-index: -1;
}

<div class="parent">
  <div class="above">
    <div>Square1</div>
    <div>Square2</div>
    <div>Square3</div>
  </div>
  <div class="under"><img src="https://picsum.photos/100/200"></div>
</div>