如何强制一列位于另一列之上（重叠）

Question

我有两个包含图像的网格列，我想强制它们彼此重叠，就像此处的设计所示：

然而，Ionic 和 Bootstrap（Ionic 使用的）似乎都没有提供这样的选项。

我目前的代码如下：

  <ion-row>
    <ion-col>
      <img src="assets/images/planet-ring.svg">
    </ion-col>
    <ion-col>
      <img src="assets/images/wear-image.png">
    </ion-col>
  </ion-row>

将列并排放置：

我也试过用下面的代码玩绝对位置，但它使 ionic 失去了一些默认的列样式并强制图像从列中移出：

.app-overlap-column {
  position: absolute;
  left: 0;
  right: 0;
}

有什么实现方法吗？

Answer 1

他们是否分列？为什么不把它们一个包在另一个里面？或者可以尝试将下面想要的图像设置为另一个包装器的 background-image，如下所示：

<ion-row class="wrapper">
  <img src="assets/images/planet-ring.svg">
</ion-row>

.wrapper {
  background-image: url("assets/images/wear-image.png");
  // insert width, height, padding...
}

Answer 2

找到一个简单的解决方案！
只需在第二列使用 offset="-12"，如下所示：

<ion-row>
   <ion-col>
     <img src="assets/images/planet-ring.svg">
   </ion-col>
   <ion-col offset="-12">
     <img src="assets/images/wear-image.png">
   </ion-col>
 </ion-row>

P.S。这是有效的，因为网格被分成 12 个“列”，当我们提供偏移量为 -12 时，我们基本上将列移到前面，在另一列之上。

如何强制一列位于另一列之上（重叠）

How to force a column to be on top of another column (to overlap)

html

css

sass

twitter-bootstrap

ionic-framework