Difficulty positioning div in CSS

Question

I am making a layout with the user’s avatar logged in, my difficulty is in keeping this green circle accompany the photo, as follows in the image below: Using position: Absolute; It is as in the photo, but when changing the screen resolution the green circle does not accompany (2 image).

Css code:

.image_inner_container{
border-radius: 50%;
padding: 5px;
background: #833ab4; 
background: -webkit-linear-gradient(#fcb045, #fd1d1d, #833ab4); 
background: linear-gradient(#fcb045, #fd1d1d, #833ab4);
display: inline-block;
max-width: 100%;
height: auto;
z-index: 1;
}
.green_icon{
background-color: #4cd137;
position: absolute;
right: 465px;
bottom: 170px;
height: 23px;
width: 23px;
border:3px solid white;
border-radius: 50%;
display: inline-block;
}

Html code:

<div class="green_icon"></div>
<div class="image_inner_container">
<a href="<?php echo site_url($account_type . '/manage_profile');?>">
<img src="<?php echo base_url('/uploads/'.$this->session- 
>userdata('login_type').'_image/'.$this->session- 
>userdata('login_user_id').'.jpg');?>" class="img-circle" width="125" 
height="125">
</div>

Answer 1

Place the green circle div inside the avatar div and place position: relative; in div.image_inner_container and adjust the values right and bottom of the green circle to position where either:

.image_inner_container{
position: relative;
border-radius: 50%;
padding: 5px;
background: #833ab4; 
background: -webkit-linear-gradient(#fcb045, #fd1d1d, #833ab4); 
background: linear-gradient(#fcb045, #fd1d1d, #833ab4);
display: inline-block;
max-width: 100%;
height: auto;
z-index: 1;
}
.green_icon{
background-color: #4cd137;
position: absolute;
right: 0;
bottom: 0;
height: 23px;
width: 23px;
border:3px solid white;
border-radius: 50%;
display: inline-block;
}

<div class="image_inner_container">
   <div class="green_icon"></div>
   <a href="<?php echo site_url($account_type . '/manage_profile');?>">
   <img src="<?php echo base_url('/uploads/'.$this->session- 
   >userdata('login_type').'_image/'.$this->session- 
   >userdata('login_user_id').'.jpg');?>" class="img-circle" width="125" 
   height="125">
</div>

You are misplacing the green circle, you are taking as reference the whole page. When using position: absolute, the element takes the whole page as a reference. To position one element within another, it is first necessary for it to be within, and the div-parent to have position: relative;. This article (in English) explains well the functioning of the property position.