CODEWITHSUNDEEP
htmlcss
RNA
RNA

Reputation: 1071

overlapping image in html

Question:

How do I place new_icon inside app_icon as below image?

There is one condition: .img-icon and .td-icon can not be modified

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>

image:

enter image description here

Upvotes: 2

Views: 75

Answers (1)

Pete
Pete

Reputation: 58432

Try this (comments in the css)

.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 */

More information about css positioning and z-indexes

Upvotes: 3

Related Questions