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

Question

I have two grid columns that contain images, and I'd like to force them to be on top of each other, like it's shown in the design here:

However, neither Ionic, nor Bootstrap (that is used by Ionic) doesn't seem to provide such option.

What I currently have is the following code:

  <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>

That puts the columns side by side:

I've also tried playing with absolute positions with the code below, but it made the ionic to lose some default column styles and forced the image to go out of the column:

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

Any ideas of how to achieve this?

Answer 1

Do they have to be in separated columns? Why not put them one wrapped inside the other? Or maybe try setting the image you want below to be the background-image of the other one's wrapper like so:

<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...
}