이미지의 오른쪽 하단에 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 { 
    position: relative; 
    display: inline; 
} 

가 여기에 수정 jsfiddle의 .container 에 : 나 이미지에 조금 당신의 CSS를 수정 한 http://jsfiddle.net/ZC84G/4/

Answer 2

컨테이너 div는 더 width 및 height 설정이 없습니다. 그리고 <div>은 기본적으로 block-level 요소이므로 100% 너비로 설정됩니다. 즉, 많은 수의 수평 공간 만 남았습니다. 당신과 함께 IMG CSS를 교체 할 경우

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

:

플러스, 당신은 또한 당신의 이미지 크기를 제약하고 그것은 잘 작동, 예상대로

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

: http://jsfiddle.net/ZC84G/3/

Answer 3

.

기본적으로 컨테이너의 크기에 맞도록 크기를 설정하고 이제는 원하는 곳에 위치합니다. 앞으로이 방법을 찾을 수있는 방법은 브라우저에서 마우스 오른쪽 버튼을 클릭하고 다른 요소의 크기를보고 요소가 커야하는 것보다 크거나 작은 요소를 확인하는 것입니다.

.container img { 
    max-width: 100%; 
    height: auto; 
}