Difficulty in positioning div in CSS

Question

Difficulty in positioning div in CSS

Navigation

#1 by (3 votes)

2

I'm doing an avatar layout of the logged in user, my difficulty is to keep this green circle with the photo, as follows in the image below: Using position: absolute; It is as in the photo, but when changing the resolution of the screen the green circle does not accompany (2 image).

csscode:

.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:3pxsolidwhite;border-radius:50%;display:inline-block;}

HTMLcode:

<divclass="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>

css

asked by anonymous 28.12.2018 / 01:58

1 answer

Insert with three tables in MySQL with PHP I do not know how to move from one option to another [closed]

score 3 · Accepted Answer

Put the green circle div inside the avatar div and put position: relative; on div.image_inner_container and set the right and bottom values of the green circle to position where you want:

.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're misplacing the green circle, you're taking the entire page as a reference. When using position: absolute , the element takes the entire page as a reference. To position one element inside another, it must first be inside, and the parent div has position: relative; . This article explains well how the position property works.