css 이미지 겹치기 2개, 3개 (position: absolute, relative)

이번 시간에는 html에서 CSS style을 이용하여 2개 or 3개의 이미지를 겹치는 방법에 대해서 알아보겠습니다.

예제를 잘 이해하기 위해서 기본적인 개념만 잡고 넘어가도록합시다.

position 속성 요약
static : 위치를 지정하지 않을 때 사용합니다. (기본값)
relative : 위치를 계산할때 static의 원래 위치부터 계산한다.
absolute : 원래 위치와 상관없이 위치를 지정할 수 있다. 단, 가장 가까운 상위 요소를 기준으로 위치가 결정 된다.
fixed : 원래 위치와 상관없이 위치를 지정할 수 있다. 하지만 상위 요소에 영향을 받지 않기 때문에 화면이 바뀌더라도 고정된 위치를 설정 할 수 있다. 브라우저 화면의 상대 위치를 기준으로 위치가 결정된다.

 

기존 이미지 위에 이미지를 올려서 겹치는 방법은 "absolute"만 잘 사용하시면 쉽게 구현이 가능합니다.
- absolute는 element가 문서의 일반적인 흐름을 따르지 않습니다. 
- 대신 가장 가까운 위치에 있는 조상 element에 대해 상대적 위치로 배치됩니다. 
- 조상 element가 없으면 문서 본문(body)을 기준으로 삼고 페이지 스크롤에 따라 움직입니다.

---

1. 기본 이미지3개

3개의 기본 이미지에 대한 속성은 다음과 같이 주었습니다.

F-250X200.png : 기본속성인 static
E-250X200.png : 기본속성인 static
B-500X500.png : relative(static의 원래 위치부터 계산)

static값 받음 그림들은 위치조정을 위한 left 함수를 무시하고 있는 것을 볼수 있습니다.
마지막 B-500X500.png가 relative 속성으로 기존의 static위치를 기준으로해서 이동한 것을 볼 수 있습니다.

 

<div>
    <div style="position:static; top: 0px; left: 1000px;">
    <img src="img/F-250X200.png"></img> 
    </div>

    <div style="position:static; top: 0px; left: 50px;">
        <img src="img/E-250X200.png"></img>
    </div>

    <div style="position:relative ; top: 10px; left:400px;">
        <img src="img/B-500X500.png"></img> 
    </div>        
</div>

 

2. 이미지2개 겹치기

 E-250X200.png : relative 속성의 부모
 F-250X200.png : absolute 속성의 자식

 <div style="position: relative;">
    <img src="img/E-250X200.png"></img>
    <div style="position: absolute; top: 50px; left: 50px;">
         <img src="img/F-250X200.png"></img> 
    </div>
</div>

 

3. 이미지3개 겹치기

E-250X200.png : relative 속성의 부모
F-250X200.png : absolute 속성의 자식1
B-500X500.png : absolute 속성의 자식2

<div style="position: relative;">
    <img src="img/E-250X200.png"></img>

   <div style="position: absolute; top: 50px; left: 50px;">
        <img src="img/F-250X200.png"></img> 
   </div>
   <div style="position: absolute; top: 100px; left: 100px;">
       <img src="img/B-500X500.png"></img> 
  </div>
</div>

 

4. 이미지3개 겹치기 위치조정

absolute 속성을 주고 위치를 조정해서
부모의 B-500X500.png 앞단에 자식이미지 2개를 배치한 모습입니다.

<div style="position: relative;">
    
    <img src="img/B-500X500.png"></img> 

   <div style="position: absolute; top: 5px; left: 5px;">
        <img src="img/F-250X200.png"></img> 
   </div>

   <div style="position: absolute; top: 0px; left: 400px;">
        <img src="img/E-250X200.png"></img>
   </div>

</div>

 

5. 이미지3개 부모 이미지가 없는 경우

만약 부모 이미지가 없는 경우에는 body쪽 이미지를 따라가게 됩니다.
아래에 보면 <div style="position: relative;">...</div> 밖으로 이미지 파일을 이동해도 동일한 결과가 나오는 것을 볼 수 있습니다.

<div style="position: relative;">

   <div style="position: absolute; top: 5px; left: 5px;">
        <img src="img/F-250X200.png"></img> 
   </div>

   <div style="position: absolute; top: 0px; left: 400px;">
        <img src="img/E-250X200.png"></img>
  </div>

</div>    
<img src="img/B-500X500.png"></img>

 

소스코드 다운로드

위에서 사용한 소스코드입니다.

B-500X500.png

0.01MB

E-250X200.png

0.00MB

F-250X200.png

0.00MB

제CSS 이미지2개 겹치기 예제.txt

0.00MB

이상으로 css style의 position:absolute를 이용해서
이미지를 겹치는 방법에 대해서 알아보았습니다.