与顶部图像 CSS 重叠答案

【问题标题】：Overlap with top image CSS与顶部图像 CSS 重叠
【发布时间】：2018-05-04 12:23:19
【问题描述】：

我需要创建ion-card，如下所示。我尝试了很多方法。但还没有运气。有什么线索吗？

注意：它有 2 张图片。顶一个和小书的封面。

这是我需要的：

.html

<ion-card class="card-margin">
    <img class="contentPicture" [src]="data?.image" />

    <ion-card-content>
        <ion-item class="book-cover">
            <ion-thumbnail item-left class="thumbnail">
                <img [src]="data?.image2">
            </ion-thumbnail>
        </ion-item>
        <ion-item class="book-details">
            <h2>From book:
                <span>My book</span>
            </h2>
            <h2>Publisher:
                <span>My publisher</span>
            </h2>
        </ion-item>
    </ion-card-content>
</ion-card>

【问题讨论】：

stackoverflow.com/questions/48474/…
使用z-index和position absolute来解决
我需要用ion-card 来做。 @MohanGopi
是的，使用上面的堆栈链接尝试一次，即使使用 ion-card 也可以使用
希望你能在上面的 stackblitz 上模拟它。 ion-card 对我来说并不是那么容易。希望你能尝试并告诉我。 @MohanGopi

标签： css angular typescript sass ionic3

【解决方案1】：

我的尝试可以找到here。

在.book-cover类中设置样式：

.book-cover{
  top: -50px;
  z-index: 2;
  background: transparent;
}

注意：您可能需要编辑图像的 alpha 以删除图像本身中的空白（如果有）。

对于名称部分，我建议使用ion-row 和ion-col 而不是ion-item，因为后者占据了整行。

<ion-card-content>
    <ion-grid>
      <ion-row>
            <ion-col col-2 class="book-cover">
                <ion-thumbnail item-left class="thumbnail">
                    <img [src]="data?.image2">
                </ion-thumbnail>
            </ion-col>
            <ion-col class="book-details">
                <h2>From book:
                    <span>My book</span>
                </h2>
                <h2>Publisher:
                    <span>My publisher</span>
                </h2>
            </ion-col>
      </ion-row>
    <ion-grid>
    </ion-card-content>

【讨论】：

好的，我也可以为book-details 部分提供帮助吗？
更新我的答案
上面的 @Sampath 可以工作，但需要根据响应调整图像缩略图的大小..
@Sampath ion-grid 仅用于向行添加一些填充，或者如果您需要将行包装在容器内以便将一些 CSS 样式规则应用于包装器。但这就是全部，大多数时候我使用 ion-row 没有 ion-grid 包装器
哦.. 这是很好的信息。非常感谢。很长一段时间后:) @sebaferreras

【解决方案2】：

将position: relative 用于主图像，将position: absolute 用于书籍图像这里我做了示例代码

.bg-image {
  position: relative;
  
}
.book {
  position: absolute;
  top: 250px;
}
.text {
  position: absolute;
  left: 180px;
  
}

<div class="bg-image">
<img src="https://i.imgur.com/U4Oadyu.png">
</div>
<div class="book">
<img src="https://i.imgur.com/r7uK5St.jpg">
</div>
<div class="text">
<p>Text Here</p>
</div>

【讨论】：