CSS / z-index / 요소의 수직 위치 정하는 속성

z-index

position 속성을 이용하면 요소를 겹치게 놓을 수 있습니다. 이때 요소들의 수직 위치를 z-index 속성으로 정합니다. 값은 정수이며, 숫자가 클 수록 위로 올라오고, 숫자가 작을 수록 아래로 내려갑니다.

예제 1

세 개의 div 요소를 겹치게 배치했습니다. 코드 상 나중에 입력한 것일 수록 위로 올라옵니다.

<!doctype html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<title>CSS</title>
		<style>
			div {
				width: 100px;
				height: 100px;
				position: absolute;
			}
			div.x {
				background-color: #2196F3;
				top: 20px;
				left: 200px;
			}
			div.y {
				background-color: #1976D2;
				top: 50px;
				left: 260px;
			}
			div.z {
				background-color: #0D47A1;
				top: 80px;
				left: 230px;
			}
		</style>
	</head>
	<body>
		<div class="x"></div>
		<div class="y"></div>
		<div class="z"></div>
	</body>
</html>

z-index 속성을 추가해서 수직 위치를 역순으로 바꿔보겠습니다. z-index 속성이 없으면 0처럼 취급합니다.(z-index의 기본값은 auto입니다.)

div.x {
	background-color: #2196F3;
	top: 20px;
	left: 200px;
	z-index: 1;
}
div.y {
	background-color: #1976D2;
	top: 50px;
	left: 260px;
}
div.z {
	background-color: #0D47A1;
	top: 80px;
	left: 230px;
	z-index: -1;
}

예제 2

여섯 개의 div 요소를 배치합니다. div.xx, div.yy, div.zz는 div.z의 자식 요소입니다.

<!doctype html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<title>CSS</title>
		<style>
			div {
				width: 100px;
				height: 100px;
				position: absolute;
			}
			div.x {
				background-color: #2196F3;
				top: 20px;
				left: 200px;
			}
			div.y {
				background-color: #1976D2;
				top: 50px;
				left: 260px;
			}
			div.z {
				background-color: #0D47A1;
				top: 80px;
				left: 230px;
			}
			div.xx {
				background-color: #F44336;
				top: 30px;
				left: 50px;
			}
			div.yy {
				background-color: #D32F2F;
				top: 60px;
				left: 110px;
			}
			div.zz {
				background-color: #B71C1C;
				top: 90px;
				left: 70px;
			}
		</style>
	</head>
	<body>
		<div class="x"></div>
		<div class="y"></div>
		<div class="z">
			<div class="xx"></div>
			<div class="yy"></div>
			<div class="zz"></div>
		</div>
	</body>
</html>

코드를 입력한 순서대로 쌓입니다.

div.xx, div.yy, div.zz에 z-index 속성을 추가해서 순서를 바꾸었습니다.

div.xx {
	background-color: #F44336;
	top: 30px;
	left: 50px;
	z-index: 2;
}
div.yy {
	background-color: #D32F2F;
	top: 60px;
	left: 110px;
	z-index: 3;
}
div.zz {
	background-color: #B71C1C;
	top: 90px;
	left: 70px;
	z-index: 1;
}

div.x에 z-index 속성을 추가해서 제일 위로 올렸습니다.

div.x {
	background-color: #2196F3;
	top: 20px;
	left: 200px;
	z-index: 10;
}

div.x가 div.z보다 위에 위치시키므로, div.xx, div.yy, div.zz보다 위에 있게 됩니다.

div.z의 z-index 값에 큰 값을 넣어 제일 위로 올립니다.

div.z {
	background-color: #0D47A1;
	top: 80px;
	left: 230px;
	z-index: 9999;
}

하지만, div.z의 자식 요소인 div.xx, div.yy, div.zz보다 위로 올라오지는 못합니다.

즉, z-index는 형제 요소 간의 수직 위치를 정하고, 이 때 값이 없으면 0으로 처리합니다. 자식 요소는 부모 요소와 같이 움직입니다.

같은 카테고리의 다른 글
CSS / 짧은 밑줄 만들기

CSS / 짧은 밑줄 만들기

짧은 밑줄 만들기 밑줄은 보통 text-decoration이나 border 속성으로 만듭니다. 그런데 그렇게 만든 밑줄은 선택한 요소 전체에 적용됩니다. 즉, 요소가 길면 밑줄도 길게 만들어지고, 요소가 짧으면 밑줄도 짧게 만들어집니다. 요소보다 짧은 밑줄을 만드는 방법은 :after 선택자를 이용하는 것입니다. 요소 뒤에 선을 만들고 위치와 길이를 정해주면 됩니다. 예를 들어 h1 요소에 짧은 밑줄을 만들고 싶다면 다음과 ...

CSS / overflow / 내용이 요소의 크기를 벗어났을 때 처리 방법 정하는 속성

CSS / overflow / 내용이 요소의 크기를 벗어났을 때 처리 방법 정하는 속성

개요 overflow는 내용이 요소의 크기를 벗어났을 때 어떻게 처리할지를 정하는 속성입니다. 기본값 : visible 상속 : No 애니메이션 : No 버전 : CSS Level 2 문법 overflow: visible | hidden | scroll | auto | initial | inherit visible : 박스를 넘어가도 보여줍니다. hidden : 박스를 넘어간 부분은 보이지 않습니다. scroll : 박스를 넘어가든 넘어가지 않든 스크롤바가 나옵니다. auto : 박스를 ...

CSS / word-break / 줄바꿈을 단어 기준으로 할 지 글자 기준으로 할 지 정하는 속성

CSS / word-break / 줄바꿈을 단어 기준으로 할 지 글자 기준으로 할 지 정하는 속성

개요 word-break는 줄바꿈을 할 때 단어 기준으로 할 지 글자 기준으로 할 지 정하는 속성이다. 기본값 : normal 상속 : Yes 애니메이션 : No 버전 : CSS Level 3 문법 word-break: normal | break-all | keep-all | initial | inherit; normal : CJK 문자는 글자 기준으로, CJK 이외의 문자는 단어 기준으로 줄바꿈한다. break-all : 글자 기준으로 줄바꿈한다. keep-all : 단어 ...

CSS / 구분선 만들기

CSS / 구분선 만들기

글의 완급 조절, 내용 전환 등을 위해 구분선을 사용하는 경우가 많다. 선은 여러 가지 방식으로 만들 수 있는데, 보기 좋게 꾸미는 것은 CSS로 한다. 아래는 div 태그에 모양을 입혀서 구분선을 만드는 몇 가지 예제이다. 예제 문서 <div class="jb-division-line"></div>를 꾸며서 구분선을 만들 것이다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...

CSS / 마우스 오버 시 텍스트 나오게 하는 방법

CSS / 마우스 오버 시 텍스트 나오게 하는 방법

CSS로 특정 요소에 마우스를 올렸을 때 보이지 않던 특정 요소가 보이게 할 수 있다. 아래는 문단에 마우스를 올렸을 때 div 요소가 나오게 하는 예제이다. div 요소 안에 텍스트가 있지만, 텍스트가 아닌 이미지 등 다른 것도 가능하다. 마우스 올렸을 때 모양 만들기 마우스를 올렸을 때 보이길 원하는 모양을 먼저 만든다. .jb-title에 마우스를 올리면 .jb-text가 ...

CSS / IE8 이하에서 border-radius, box-shadow 적용시키는 방법

CSS / IE8 이하에서 border-radius, box-shadow 적용시키는 방법

CSS3에서 많은 속성이 추가되었습니다. 그 중에서 개인적으로 가장 많이 사용하는 것이 border-radius입니다. 테두리를 둥글게 만들거나 이미지를 원으로 만들 때 이미지 편집 프로그램을 사용할 필요가 없기 때문입니다. 하지만 문제가 있습니다. IE8 이하에서는 적용되지 않는다는 것이죠. 이 문제를 해결해주는 것이 PIE입니다. 간단한 코드 한 줄로 IE8 이하에서도 border-radius를 적용시킬 수 있습니다. PIE 다운로드 다음 링크에서 PIE를 다운로드 받습니다. http://css3pie.com/download/ 업로드 압축을 풀면 ...

CSS / 표(table) 꾸미기 / 틀 고정(행 또는 열 고정) 만들기

CSS / 표(table) 꾸미기 / 틀 고정(행 또는 열 고정) 만들기

엑셀에 틀 고정이라는 기능이 있다. 틀 고정을 사용하면 상하 또는 좌우로 스크롤해도 항상 보이는 행 또는 열을 만들 수 있다. CSS로도 같은 효과를 낼 수 있다. 이를 구현하기 위해 사용하는 속성은 display: sticky이다. 예를 들어 다음과 같은 표가 있다고 하자. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...

CSS / 애니메이션 / transform / 회전, 확대, 축소, 비틀기 등 형태 변형하는 속성

CSS / 애니메이션 / transform / 회전, 확대, 축소, 비틀기 등 형태 변형하는 속성

CSS3의 transform 속성으로 요소를 회전하거나 확대/축소하거나 비트는 등 형태를 변형할 수 있습니다. IE는 버전 10 이상부터 지원한다는 것에 주의합니다. transform / rotate transform의 rotate로 요소를 회전시킬 수 있습니다. 문법 transform: rotate( angle ) transform: rotateX( angle ) transform: rotateY( angle ) angle에는 각의 크기를 입력합니다. 단위는 deg, rad, grad, turn 등을 사용합니다. turn은 1회전, 즉 360deg를 의미합니다. 예제 마우스를 올렸을 때 회전합니다. 회전하는 ...

CSS / 유튜브 동영상 반응형으로 삽입하는 방법

CSS / 유튜브 동영상 반응형으로 삽입하는 방법

유튜브 영상을 블로그나 홈페이지에 넣을 때 보통 iframe을 사용한다. 코드는 유튜브 영상 공유에서 를 클릭하여 구할 수 있다. 아래와 같은 코드인데, 고정폭이다. 즉 웹브라우저의 가로폭이 커지든 작아지든 가로폭이 일정하다. <iframe width="560" height="315" src="https://www.youtube.com/embed/ybhXVSAdIRE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> 이를 반응형으로 만들고 싶다면 아래처럼 한다. 16:9 크기의 div로 감싸고, iframe에 style을 추가하여 ...

CSS / 마우스 오버 효과 / 서서히 길어지는 선 그리기

CSS / 마우스 오버 효과 / 서서히 길어지는 선 그리기

마우스를 올리면 선이 그려지는 효과를 만들어봅니다. 위쪽 가로 방향으로 선 그리기 다음과 같이 사각형을 만듭니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { box-sizing: border-box; ...