如何在离子中将图像叠加在另一个图像之上

Question

我想创建类似的东西：

在我的设计中，但我不确定在 ionic 中使用什么 CSS。这就是我的代码示例的样子

<ion-item class="main-container" lines="none">
    <ion-img class="cover-img"
      src="../../assets/images/logo.png"
    ></ion-img>
  </ion-item>

  <ion-item class="main-container" lines="none" style="margin:0;">
      <ion-avatar>
        <img src="../../assets/images/avatar.png" />
      </ion-avatar>
    <ion-label>Item Avatar</ion-label>
  </ion-item>

谁能帮我处理 CSS 部分？

Answer 1

您可以使用margin-top: -50px 来实现。

您也可以将其设为position: absolute 元素并使用top: -50px 或top: -50%。

红色的例子是position: absolute，黑色的例子是margin：

<div style="display: flex">
  <div style="width: 45%; height: 100px; margin-top: 50px; margin-right: 5%; border: 1px solid black">
    <div style="width: 50px; height: 50px; margin: -25px 0 0 25px; border: 1px solid black"></div>
  </div>

  <div style="position: relative; width: 45%; height: 100px; margin-top: 50px; border: 1px solid red">
    <div style="position: absolute; width: 50px; height: 50px; top: -50%; right: 50%; transform: translate(50%, 50%); border: 1px solid red"></div>
  </div>
</div>