html - CSS : put checked icon div on the image div

Question

我有一些图片，当我点击它时，会出现一个绿色的勾选图标。但我无法使其位置正确。

.p-t-md{
padding-top:20px;
}
.p-l-md{
padding-left:20px;
}
.speakers_list {
	width: 605px;
	margin: 0 auto;
	height: 245px;
	overflow-x: hidden;
	overflow-y: auto;
}
.speakers_list .speaker_div {
	width: 75px;
	height: 75px;
	margin: 0 auto;
}
.speakers_list .speaker_div img {
	height: 100%;
	width: 100%;
}
.speakers_list .speaker_div .speaker_name {
	color: #999999;
	font-size: 10.61px;
}
.speakers_list .selected_div {
	position: absolute;
	width: 20px;
	height: 20px;
	background: #27c24c;
	border: thin white solid;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
<div class="row speakers_list p-t-md p-l-md" >
    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 m-b-lg">
        <div class="selected_div">
            <i class="fa fa-check text-white"></i>
        </div>
        <div class="speaker_div">
            <img src="http://img.xcitefun.net/users/2011/02/231256,xcitefun-beautiful-small-nature-world-01.jpg" class=" img-responsive img-circle">
        </div>
        <div class="speaker_name text-center m-t-xs">
            <span> 1 </span>
        </div>
    </div>
    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 m-b-lg">
        <div class="speaker_div">
            <img src="http://img.xcitefun.net/users/2011/02/231256,xcitefun-beautiful-small-nature-world-01.jpg" class=" img-responsive img-circle">
        </div>
        <div class="speaker_name text-center m-t-xs">
            <span> 2 </span>
        </div>
    </div>
</div>

我希望绿色 div 位于右上方，复选标记位于绿色 div 的中心并且也应该响应。

任何帮助都会很棒。

谢谢。

Answer 1

查看这段代码:

.p-t-md{
padding-top:20px;
}

.p-l-md{
padding-left:20px;
}


.speakers_list {
	width: 605px;
	margin: 0 auto;
	height: 245px;
	overflow-x: hidden;
	overflow-y: auto;
}

.speakers_list .speaker_div {
	width: 75px;
	height: 75px;
	margin: 0 auto;
    position: relative;
}

.speakers_list .speaker_div img {
	height: 100%;
	width: 100%;
}

.speakers_list .speaker_div .speaker_name {
	color: #999999;
	font-size: 10.61px;
}

.speakers_list .selected_div {
	position: absolute;
	width: 20px;
	height: 20px;
	background: #27c24c;
	border: thin white solid;
    border-radius: 50%;
    right: 0px;
    padding-left: 3px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">

<div class="row speakers_list p-t-md p-l-md" >
                          <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 m-b-lg">
                            <div class="speaker_div">
                             <div class="selected_div">
                              <i class="fa fa-check text-white"></i>
                            </div>
                                <img src="http://img.xcitefun.net/users/2011/02/231256,xcitefun-beautiful-small-nature-world-01.jpg" class=" img-responsive img-circle">
                            </div>
                            <div class="speaker_name text-center m-t-xs">
                              <span> 1 </span>
                            </div>
                          </div>
                          <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 m-b-lg">
                            <div class="speaker_div">
                                <img src="http://img.xcitefun.net/users/2011/02/231256,xcitefun-beautiful-small-nature-world-01.jpg" class=" img-responsive img-circle">
                            </div>
                            <div class="speaker_name text-center m-t-xs">
                              <span> 2 </span>
                            </div>
                          </div>
                         
                         
                        </div>