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으로 처리합니다. 자식 요소는 부모 요소와 같이 움직입니다.
Related Posts
높이가 같은 박스 만들기 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { box-sizing: border-box; font-family: Consolas, monospace; ...
CSS / list-style-image / 목록의 마커로 이미지 사용하기
개요 list-style-image로 이미지를 ul, ol 등의 목록의 마커(marker)로 사용할 수 있습니다. 기본값 : none 상속 : Yes 애니메이션 : No 버전 : CSS Level 1 문법 list-style-image: none | url | initial | inherit none : 이미지가 없습니다. url : 사용할 이미지의 URL을 입력합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 이미지는 원본 크기 그대로 나옵니다. 따라서 글자 크기에 ...
CSS 변수 CSS에 변수를 만들고 사용할 수 있습니다. 변수를 이용하면 여러 값을 한 번에 변경할 수 있습니다. 변수 선언 --variable-name: value; 변수를 정의하면, 변수를 정의한 요소와 그 하위 요소에서 그 변수를 사용할 수 있습니다. 만약 어느 곳에서나 사용할 수 있게 하려면 :root에 정의합니다. 변수 사용 property: var( --variable-name ) 예제 기본 변수 --my-color-1을 red로 설정하고 사용합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> :root ...
CSS / background-clip / 배경을 어디에 넣을지 정하는 속성
개요 HTML 요소는 박스(box)로 이루어져 있습니다. 배경 이미지나 배경색을 그 박스 중 어디에 넣을 지 정하는 속성이 background-clip입니다. 기본값 : border-box 상속 : No 애니메이션 : No 버전 : CSS Level 3 문법 background-clip: border-box | padding-box | content-box | initial | inherit; border-box : 테두리 영역과 그 안쪽 영역을 채웁니다. padding-box : 안쪽 여백 영역과 그 안쪽 영역을 채웁니다. content-box : 내용 영역과 그 안쪽 영역을 채웁니다. initial : ...
CSS / Grid / grid-column-gap, grid-row-gap, grid-gap
그리드 아이템 사이의 간격을 정하는 속성은 grid-row-gap, grid-column-gap, grid-gap입니다. grid-column-gap은 열 사이의 간격, grid-row-gap은 행 사이의 간격, grid-gap은 행과 열의 간격을 동시에 정할 수 있는 축약형입니다. 아래는 아이템 사이에 간격이 없는 간단한 그리드입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> ...
배경색을 만드는 속성 배경색은 background-color 속성으로 만듭니다. table, tr, th, td, thead, tbody, tfoot에 적용할 수 있습니다. 기본 모양 다음 표를 기본으로 하고, 배경색을 여러 곳에 추가해보겠습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> table { ...
CSS / placeholder의 색, 글자 모양 등 꾸미기
placeholder는 HTML5에서 새로 나온 속성(attribute)으로 input 요소나 textarea 요소에 안내문을 넣을 수 있습니다. 기본 모양은 회색의 글자로, 배경색이 하얀색 또는 밝은 색이면 보기에 괜찮습니다. 하지만 배경색이 어두운 색이거나 화려한 색이면 회색 글자가 어울리지 않을 수 있습니다. placeholder는 ::placeholder 선택자로 선택하여 꾸밀 수 있습니다. 다음은 꾸미기 전의 input과 textarea입니다. <!doctype html> <html lang="ko"> <head> ...
글의 완급 조절, 내용 전환 등을 위해 구분선을 사용하는 경우가 많다. 선은 여러 가지 방식으로 만들 수 있는데, 보기 좋게 꾸미는 것은 CSS로 한다. 아래는 div 태그에 모양을 입혀서 구분선을 만드는 몇 가지 예제이다. 예제 문서 <div class="jb-division-line"></div>를 꾸며서 구분선을 만들 것이다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...
CSS로 특정 요소에 마우스를 올렸을 때 보이지 않던 특정 요소가 보이게 할 수 있다. 아래는 문단에 마우스를 올렸을 때 div 요소가 나오게 하는 예제이다. div 요소 안에 텍스트가 있지만, 텍스트가 아닌 이미지 등 다른 것도 가능하다. 마우스 올렸을 때 모양 만들기 마우스를 올렸을 때 보이길 원하는 모양을 먼저 만든다. .jb-title에 마우스를 올리면 .jb-text가 ...
CSS / 표(table) 꾸미기 / 틀 고정(행 또는 열 고정) 만들기
엑셀에 틀 고정이라는 기능이 있다. 틀 고정을 사용하면 상하 또는 좌우로 스크롤해도 항상 보이는 행 또는 열을 만들 수 있다. CSS로도 같은 효과를 낼 수 있다. 이를 구현하기 위해 사용하는 속성은 display: sticky이다. 예를 들어 다음과 같은 표가 있다고 하자. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...