Image over a image

I want my edit icon to appear just below the profile pic image as shown in the below image download

But I’m getting as
edd

The code is from html file

<div id="ppic">
          <img src="assets/imgs/pp.jpeg" id="pic"> 
          <span>
                <button ion-button clear >
                    <img src="assets/imgs/edit-icon.png" id="imgedit">
                </button>
          </span>
          <p id="name">M S</p>
          <p id="loc">Markham , ON</p>
      </div>

Scss code

#ppic {
        
       // position: absolute;
        padding-top: 40px;
        width: 90px;
        height: 90px;
        display: block;
        margin-left: auto;
        margin-right: auto;
       
    }
    #pic {
        border-radius: 50%;
        
    }
    #imgedit {
        position: absolute;
        //z-index: inherit;
        top: 10px; 
    }

can someone help me?