在html中重叠图像

Question

问题：

如何将new_icon置于app_icon内，如下图所示？

有一个条件：.img-icon和.td-icon无法修改

的CSS：

.img-icon
    max-width: 100%
    min-width: 40px
    height: auto
    vertical-align middle
    margin-top 20px
    margin-right 20px

.icon_new
    ?????

.td-icon
    width: 30%
    margin: auto

HTML：

<p class="td-icon">
    <div class="icon_new"><img src="new_icon.png" height="14"></div>
    <img class="img-icon" src="app_icon.png" height="72" width="72">
</p>

图像：

Answer 1

试试这个（css中的评论）

＆＃13;

＆＃13;

.img-icon
    max-width: 100%
    min-width: 40px
    height: auto
    vertical-align middle
    margin-top 20px
    margin-right 20px
    position:relative;      /* add this so you can add z-index to make it come underneath new icon */
    z-index:1;

.icon_new
    position:absolute;      /* position it in top right */
    top:5px;                /* change top and right to match your needs */
    right:5px;
    z-index:2;              /* make this appear above original icon */
    display:inline-block;   /* optional to make div the width of it's image */

.td-icon
    width: 30%
    margin: auto
    position:relative;       /* add this to allow absolute positioning of new icon */

＆＃13;

＆＃13;

＆＃13;

有关css positioning和z-indexes

的更多信息