How can I overlap an img on top of another one in ionic

user_15811833 0
Viewed 214

I want to create something similar to this:

enter image description here

in my design, but I'm not sure what CSS to use in ionic. This is what my code sample looks like

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

Can anyone help me with the CSS part?

ionic4 ionic-framework angular css html
1 Answers

You can use margin-top: -50px to achieve that.

Also you can make it a position: absolute element and use top: -50px or top: -50% too.

Red example is with position: absolute and black one is with 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>

user_114343730
Related