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

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?

CodePudding user response：

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 >
  <img src="assets/images/planet-ring.svg">
</ion-row>

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

CodePudding user response：

Found a simple solution!
Just use offset="-12" on the second column like this:

<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. This works, because the grid is divided into 12 "columns" and when we provide offset as -12, we basically move the column to the front, above the other one.