스타일 시트 CSS z-index 태그 요소 보이는 순서를 결정

스타일시트 CSS

스타일 시트 CSS z-index 태그 요소 보이는 순서를 결정

 

환경: Eclipse Mars

 

z-index 속성은 position 속성과 같이 사용됩니다. 왜냐하면 position: absolute 로 지정할 경우 스크롤을 따라 다니기 때문에 다른 태그와 겹쳐질 수 있습니다. 이때 화면에 보여 주는 순서를 지정하지 않으면 가려지게 됩니다. z-index 에 값이 높을 수록 위쪽에 위치합니다. 스크롤을 따라다니는 위아래 아이콘을 지정할 때 많이 이용합니다.

 

z-index 의 값은 기본값이 0 이며 마이너스 값도 지정이 가능합니다. 그리고 숫자가 높을 수록 앞에 배치할 수 있습니다. 만약 auto 로 값을 지정하게 되면 태그의 순서대로 제일 나중에 나오는 태그부터 상단에 위치합니다. 샘플은 3개의 div z-index 값을 차례대로 1, 2, 3 을 적용해서 마지막 div 가 제일 위로 올라오게 만들었습니다.  

<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>CSS 속성</title>
<style type="text/css">
	body {
		background-color: #e7e7e7;
	}
	div {
		width: 300px; height: 60px;
		border: 1px solid; padding: 20px;
	}
	#zindex1 {
		position: absolute;
		top: 10px;
		left: 10px;
		background-color: #F9F249;
		z-index: 1;
	}
	#zindex2 {
		position: absolute;
		top: 50px;
		left: 50px;
		background-color: #69F354;
		z-index: 2;
	}
	#zindex3 {
		position: absolute;
		top: 100px;
		left: 100px;
		background-color: #36FFFF;
		z-index: 3;
	}
</style>
</head>
<body>
	<div id="zindex1">position: absolute   z-index: 1</div>
	<div id="zindex2">position: absolute   z-index: 2</div>
	<div id="zindex3">position: absolute   z-index: 3</div>
</body>
</html>

 

스타일 시트 CSS z-index 태그 요소 보이는 순서를 결정

 

Posted by 녹두장군