Позиция div в нижнем правом углу изображения

Question

Я пытаюсь поместить элемент div в нижнем правом углу изображения, который находится внутри элемента контейнера. Я устанавливаю положение относительно контейнера и устанавливаю абсолютное значение для внутреннего div, но он не работает. Вот (http://jsfiddle.net/ZC84G/). Пожалуйста помоги.

<div class="container"> 
    <div class="icon"></div> 
    <img src="/images/someImage.png" /> 
</div> 

CSS:

body { 
    background-color: black; 
} 
.container { 
    position: relative; 
} 
.container img { 
    max-width: 75%; 
    max-height: 80%; 
} 

.icon{ 
    background-image: url('http://icons.iconarchive.com/icons/iconfactory/star-wars-lego/32/Biggs-No-Helmet-icon.png'); 
    width: 31px; 
    height: 31px; 
    position: absolute; 
    bottom: 5px; 
    right: 5px; 
} 

Answer 1

Это потому, что по умолчанию div имеет блок режим отображения, а его ширина составляет 100% родительского контейнера. Попробуйте добавить дисплей: встроенный к .container

.container { 
    position: relative; 
    display: inline; 
} 

Вот исправленный jsfiddle: http://jsfiddle.net/ZC84G/4/

Answer 2

Ваш контейнер div не имеет width и height набор. А так как <div> - это элемент block-level по умолчанию, он будет установлен в 100% шириной, т.е. расширяется до любого горизонтального пространства.

Кроме того, вы также сдерживающие размер изображения:

max-width: 75%; 
max-height: 80%; 

Если заменить IMG CSS с:

max-width: 75%; 
max-height: 80%; 

Он отлично работает, как и ожидалось: http://jsfiddle.net/ZC84G/3/

Answer 3

Я изменил свой CSS на изображение немного.

В принципе, я установил его для правильного масштабирования до размера его контейнера, и теперь он сидит там, где я думаю, что вы этого хотели. То, как вы могли бы найти это в будущем, - это осмотреть элемент, щелкнув правой кнопкой мыши в браузере и посмотрев на размер различных элементов, чтобы увидеть, что расширяется больше/меньше, чем нужно.