z-index
z-index
- 요소의 쌓임 순서를 정의
- 기본값은 auto, 정수값으로 정의
- 정수값은 쌓임 맥락에서의 레벨을 의미
- 값이 클수록 전면에 표시
- z-index가 같으면 나중에 생성된 것이 전면에 쌓임
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>z-index</title>
</head>
<style>
div {
width: 100px; height: 100px; position: relative;
}
div:nth-child(1){ background-color: yellow; }
div:nth-child(2){ background-color: cyan; bottom: 50px; }
div:nth-child(3){ background-color: ivory; bottom: 100px; }
div:nth-child(4){ background-color: mediumslateblue; bottom: 150px; }
.first { z-index: 4; }
.second { z-index: 2;}
.third { z-index: 2;}
.fourth { z-index: 1;}
</style>
<body>
<div class="first">1</div>
<div class="second">2</div>
<div class="third">3</div>
<div class="fourth">4</div>
</body>
</html>
ISTJ의 재미없는 velog