HTML DIV tag: 영역 겹치기와 보이기 순서 지정하는 방법 - Position, z-index

DIV영역을 여러개 놓고 서로 겹치게 하거나, 겹친 영역에 순서를 줄 수 있다.
DIV영역을 겹치게 놓고 순서를 주지 않으면,<div>태그가 위치한 순서대로 겹쳐진다. 즉, 윗쪽에 있는 DIV영역부터 차례로 표시되므로, 아래쪽에 있는 DIV영역이 윗쪽에 있는 DIV영역 위에 겹치게 된다.


1. 영역의 보이기 순서(z-index)를 지정하지 않은 태그 모양

<div style="position: relative;">
첫번째 DIV 영역
</div>
<div style="position: relative; left:10px; top: -70px;">
두번째 DIV 영역
</div>

[적용한 모습]

첫번째 DIV 영역

두번째 DIV 영역

2. 영역의 보이기 순서(z-index)를 지정한 태그 모양

<div style="position: relative; z-index: 2;">
첫번째 DIV 영역
</div>
<div style="position: relative; left:10px; top: -70px; z-index: 1;">
두번째 DIV 영역
</div>

※ 윗쪽에 있는 DIV영역의 순서를 "2"번으로 주고 아래쪽에 있는 DIV영역의 순서를 "1"번으로 주었다. 아래 그림에서 보듯이, "1"번으로 지정한 아래쪽 DIV영역이 먼저 표시되고, 그 다음에 "2"번으로 지정된 윗쪽 DIV영역이 그 위에 겹쳐서 표시되었다.

[적용한 모습]

첫번째 DIV 영역

두번째 DIV 영역

3. 글자 겹치기(z-index 지정하지 않음)

<div style="color: gold; font-size: 70px; font-weight: 900; height: 100px; position: relative;">
가나다라  ABCD
</div>
<div style="color: lime; font-size: 70px; font-weight: 900; height: 100px; position: relative; left: 5px;  top: -95px;">
가나다라  ABCD
</div>

[적용한 모습]

가나다라  ABCD

가나다라  ABCD

3-1. 글자 겹치기(z-index 지정함)

<div style="color: gold; font-size: 70px; font-weight: 900; height: 100px; position: relative; z-index: 2;">
가나다라  ABCD
</div>
<div style="color: lime; font-size: 70px; font-weight: 900; height: 100px; position: relative; left: 5px;  top: -95px; z-index: 1;">
가나다라  ABCD
</div>

[적용한 모습]

가나다라  ABCD

가나다라  ABCD

위 예들에서 보듯이, DIV영역을 겹치면 겹친 영역이 그 만큼 밀리게 된다. 이를 감안하여 DIV 영역의 가로폭을 조절하여야 한다.

>> HTML 태그 사용법 목록: DIV P SPAN IMG A HR FONT BR ...