Как я могу наложить изображение 10x10px поверх другого изображения?

Question

У меня есть аватара пользователя на моем сайте. Простой тег изображения:

<img src="foo.jpg" class="userphoto" width="48" height="48" alt=""> 

Теперь я хочу поплавка изображения (Facebook Icon - 10x10px) над этим изображением в левом верхнем углу изображения.

Это означает, что пользователь аутентифицирован в Facebook.

Как я могу это сделать? CSS стиль в теге изображения, или я должен иметь отдельный div с абсолютным позиционированием?

Не нужно быть прозрачным или что-то еще, его нужно точно расположить в левом верхнем углу.

Конечно, я не могу просто физически модифицировать изображение, так как мне нужно определить, нужно ли динамически накладывать изображение на основе статуса Facebook. Но я надеялся динамически добавить класс css.

Любые идеи?

ОТВЕТ:

Понял работать с комбинацией обоих ответов. Использовал div вместо другого изображения.

HTML:

<div class="foo"> 
    <div class="fboverlay"></div> 
    <a> 
     <img src="foo.jpg" class="userphoto" width="48" height="48" alt=""> 
    </a> 
</div> 

CSS:

.foo 
{ 
    position: absolute; 
    top: 0; 
    right: 0; 
} 

.fboverlay 
{ 
    background-image: url('/image/facebook/logo.gif'); 
    position: absolute; 
    z-index: 1; 
    top: 10px; 
    left: 10px; 
    width: 10px; 
    height: 10px; 
} 

Спасибо за помощь.

Answer 1

Я знаю, что я не использую точные размеры, которые вы хотели, но вот рабочий пример для вас. (Вы должны были бы родитель «.main_photo» DIV быть размеры главного фото.)

.main_photo{ 
 
    position:relative; 
 
    width:80px; 
 
    height:80px 
 
} 
 
.inlay{ 
 
    position:absolute; 
 
    top:5px; 
 
    right:5px 
 
}

<div class="main_photo"> 
 
    <img src="https://secure.gravatar.com/avatar/?s=200&d=mm&r=pg" /> 
 
    <img class="inlay" src="https://www.rit.edu/news/lib/views/public/images/dateline_images/facebook_icon.gif" /> 
 
</div>

Answer 2

Прежде всего, вы должны указать position - это относительный или абсолютный обычно.

Во-вторых, вы должны установить z-index, если есть другие позиционированные элементы, хотя вам может и не понадобиться.

Использование top/left или bottom/right комбинации слоев изображения над другим.

Это совет, не видя никаких html/css. Очевидно, что он будет отличаться в зависимости от ситуации.

#el-on-top { position:absolute; top:0; left:0; z-index:1; } 

Вам может понадобиться установить position:relative так верхний элемент в AP'd относителен к чему-то, вместо того, скажем, обертке или всей страница.