在图片右上角显示状态

 最近有个需求,用户上传了N张图片,后台需要设置某一张为默认图片。其中中间就隐藏着这么一个需求,用户可以切换默认图片。所以想的是在图片右上角添加一个设置的按钮。我们需要让页面达到这样的效果如下图。

然后我们看这个需求,其实可以这么分解,一个img标签,一个a标签,然后让a标签在图片又上角;还有一点就是图片和右侧相距一定距离,假如是10px,那么就需要把这两个标签img和a包起来,我们使用div。

然后让设置a的位置为:

position:relative;
top:10px;// 这里只是大概写,具体多少去浏览器里面调好了,写到这里
right:10px;

 然后基本上就可以达到效果了。但是有一个问题,就是这个a虽然飘到了上面,但是他的位置还是有的,还会有一定的宽度。怎么处理。因为熟悉盒子模型的话我们知道,虽然他瞟了,但是他应该在img的右侧,占据一定宽度,所以我们可以给刚才的div设置一个宽度,把这个a挤跑,这时候就可以达到预期的效果了。

总结:这里主要是说一下这个div的宽度。有这个小例子,大家可以看一下。

猜你喜欢

转载自zhangfortune.iteye.com/blog/2337953