디자인검색
Home > 고객센터 > 자료실

자료실

자료실 영역 순서 z인텍스 지정
2021-07-09 16:00:31
하나솔루션 조회수 28
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 영역의 가로폭을 조절하여야 한다.

HANASOLUTION

SERVER LOCATION

서울시 서초구 서초동 1710-1 SK 브로드밴드 IDC 1층

이미지명

WORKING HOURS

NAME SERVER

 1    ns1.webit.kr
  211.215.17.210
 2    ns2.webit.kr
  211.215.17.212
상단으로 바로가기