点击img,img右上角怎么添加一个类似√这样的标识呢？不用伪元素

Question

1.用的bootstrap布局，开始我是打算将img与一个<span>√</span>用a包起来，用定位，让span相对于a定位。

                                <a href="#">
                                    <img src="img/zhangsan/1.jpg" class="img-responsive img-thumbnail"/>
                                    <span>√</span>
                                </a>

但是因为是响应式布局，所以其实外层的a的宽度是不确定的，然后span的位置就超过图片 了。如图：第一个是正常情况下的图标位置，第二个是分辨率减小的情况，怎么就让这个图标就定在img的右上角呢？

现在代码是这样的，怎么实现呢？考虑到兼容性，不用伪元素。

                        <div class="row">
                            <div class="col col-md-3 col-sm-6 col-xs-6">
                                <a href="#">
                                    <img src="img/zhangsan/1.jpg" class="img-responsive img-thumbnail"/>
                                </a>
                            </div>
                            <div class="col col-md-3 col-sm-6 col-xs-6">
                                <a href="#">
                                    <img src="img/zhangsan/2.jpg" class="img-responsive img-thumbnail"/>
                                </a>
                            </div>
                            </div>

Answer 1

受上面的启发，因为我的a的宽度是会随分辨率变化而变化，所以再包了一层，让div.imgBox的宽度刚刚好是里面img的宽度，这样再让span相对于imgBox定位，而不是相对于a定位就可以了。

<div class="col col-md-3 col-sm-6 col-xs-6 imgcol">
                                <a href="#">
                                    <div class="imgBox center-block">
                                        <img src="img/zhangsan/1.jpg" class="img-responsive img-thumbnail"/>
                                        <span>√</span>
                                    </div>
                                </a>
                            </div>

Answer 2

你用元素设置display:inline-block;position:relative,把img和span包起来,span绝对定位即可，希望可以帮到你

Answer 3

楼上正解，你a标签设置position:relative后，span标签设置position:absolute;top:0;right:0;就会出现在右上角，因为父元素设置了相对定位，绝对定位的子元素会相对父元素进行定位，所以不会超出图片。