创建一个圆形图像头像，其中子圆圈为状态

Question

我设法使用CSS创建一个圆形头像现在我想添加另一个位于图像底部的圆圈，以便我可以为用户创建一个状态div，类似于Skype或其他消息应用程序，问题是我我不知道如何让它相互重叠。

这是我的代码。

＆＃13;

＆＃13;

.img-circle-small {
      width: 53px;
      height:55px;
      border-top-left-radius: 50% 50%;
      border-top-right-radius: 50% 50%;
      border-bottom-right-radius: 50% 50%;
      border-bottom-left-radius: 50% 50%;
      border: 2px solid #CCC;
      margin-bottom: 2px;
    }
  
  .status{
      width: 16px;
      height:16px;
      border-top-left-radius: 50% 50%;
      border-top-right-radius: 50% 50%;
      border-bottom-right-radius: 50% 50%;
      border-bottom-left-radius: 50% 50%;
      border: 2px solid #CCC;
      margin-bottom: 2px;
      background-color: green;
    }

＆＃13;

<img src="http://i.stack.imgur.com/Dj7eP.jpg`enter code here`" alt="avatar" class="img-circle-small">
<div class="status">&nbsp;</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

将此添加到.img-circle-small

  position:relative

将此添加到.status

  position: absolute;
  top: 8px;
  z-index: 1;

并添加此伪元素作为选项：

.status::before {
   content: '8';
   color: #eee;
   font-size:.25em;
   padding-left:4px;
 }

演示

.img-circle-small {
      width: 53px;
      height:55px;
      border-top-left-radius: 50% 50%;
      border-top-right-radius: 50% 50%;
      border-bottom-right-radius: 50% 50%;
      border-bottom-left-radius: 50% 50%;
      border: 2px solid #CCC;
      margin-bottom: 2px;
      position: relative;
    }
  
  .status{
      width: 16px;
      height:16px;
      border-top-left-radius: 50% 50%;
      border-top-right-radius: 50% 50%;
      border-bottom-right-radius: 50% 50%;
      border-bottom-left-radius: 50% 50%;
      border: 2px solid #CCC;
      margin-bottom: 2px;
      background-color: green;
      position: absolute;
      top: 8px;
      z-index: 1;
    }
    
    .status::before {
       content: '8';
       color: #eee;
       font-size:.25em;
       padding-left:4px;
     }

<img src="http://i.stack.imgur.com/Dj7eP.jpg`enter code here`" alt="avatar" class="img-circle-small">
<div class="status">&nbsp</div>

Answer 2

您可以使用position: relative和position: absolute轻松完成此操作。

＆＃13;

＆＃13;

.img-circle-small {
      width: 53px;
      height:55px;
      border-top-left-radius: 50% 50%;
      border-top-right-radius: 50% 50%;
      border-bottom-right-radius: 50% 50%;
      border-bottom-left-radius: 50% 50%;
      border: 2px solid #CCC;
      margin-bottom: 2px;
    }
  
  .status{
      width: 16px;
      height:16px;
      border-top-left-radius: 50% 50%;
      border-top-right-radius: 50% 50%;
      border-bottom-right-radius: 50% 50%;
      border-bottom-left-radius: 50% 50%;
      border: 2px solid #CCC;
      margin-bottom: 2px;
      background-color: green;

      position: absolute;

    }

  .temp{
    position: relative;
    display: inline-block;
  }
  .topLeft{
      top: 0;
      left: 0;
  }
  .bottomRight{
     bottom: 0;
     right: 0;
  }

＆＃13;

<div class="temp">
  <img src="http://i.stack.imgur.com/Dj7eP.jpg`enter code here`" alt="avatar" class="img-circle-small">
  <span class="status topLeft">&nbsp</span>
</div>
<div class="temp">
  <img src="http://i.stack.imgur.com/Dj7eP.jpg`enter code here`" alt="avatar" class="img-circle-small">
  <span class="status bottomRight">&nbsp</span>
</div>

＆＃13;

＆＃13;

＆＃13;