하나솔루션
Home > 고객센터 > 자료실

자료실

자료실

영역 순서 z인텍스 지정

  • 하나솔루션
  • 2021-07-09 16:00:31
  • hit199
  • 121.66.28.43
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 영역의 가로폭을 조절하여야 한다.
게시글 공유 URL복사
댓글[0]

열기 닫기

CUSTOMER CENTER

010-2343-0702

월-금 am 9:30 - pm 06:00
점심시간 : am 12:00 - pm 01:00
토ㆍ일 / 공휴일 휴무

무통장 입금계좌 안내

661-910388-38207

네임서버안내

1차 ns1.webit.kr
211.215.17.210
2차 ns2.webit.kr
211.215.17.212