1. position
position은 CSS에서 요소의 위치를 제어하는 속성으로, 요소가 문서 내에서 어디에, 어떻게 배치될지를 결정하는 데 사용됩니다. 기본값인 static은 일반적인 문서 흐름에 따라 배치되고, relative는 자신의 원래 위치를 기준으로 이동할 수 있으며, absolute는 가장 가까운 위치 지정 부모 요소를 기준으로 배치됩니다. fixed는 브라우저 화면을 기준으로 고정되어 스크롤해도 위치가 변하지 않고, sticky는 일반 흐름을 따르다가 특정 위치에서 고정되는 하이브리드 속성입니다. top, right, bottom, left 같은 좌표 속성과 함께 사용되어, 요소를 정밀하게 배치하거나 겹치게 만들 수 있는 중요한 레이아웃 도구입니다.
2. position의 종류
1. relative
relative는 CSS에서 position 속성의 한 종류로, 요소를 자기 자신의 원래 위치를 기준으로 상대적으로 이동할 수 있게 해주는 속성입니다. 기본적으로 웹 요소들은 position: static 상태로, 문서의 흐름대로 자연스럽게 배치되지만, position: relative를 적용하면 요소는 자신이 원래 있어야 할 위치를 기준점으로 삼아 top, left, right, bottom 값을 통해 위치를 조정할 수 있습니다. 중요한 점은, 이동하더라도 원래 위치의 공간은 그대로 유지된다는 것입니다. 따라서 요소가 겉보기엔 이동해도 주변 레이아웃에는 영향을 덜 미칩니다. 또한, relative는 자식 요소 중 absolute 포지션을 가진 요소의 기준점이 되기도 하여, 다양한 레이아웃 컨트롤에 필수적인 역할을 합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>position: relative + z-index 예제</title>
<style>
.container {
background-color: #eee;
padding: 40px;
position: relative;
height: 300px;
}
.box {
width: 150px;
height: 150px;
background-color: #4caf50;
color: white;
font-weight: bold;
line-height: 150px;
text-align: center;
position: relative; /* 기준 유지 */
}
.relative-box {
background-color: #ff9800;
top: -100px; /* 위로 올려서 겹치게 */
left: 80px; /* 오른쪽으로 이동 */
z-index: 10; /* 겹칠 때 위에 보이게 */
}
</style>
</head>
<body>
<div class="container">
<div class="box">기본 박스</div>
<div class="box relative-box">relative 박스</div>
</div>
</body>
</html>
💬 z-index
z-index는 CSS에서 요소들의 **쌓이는 순서(z축 방향, 앞뒤 관계)**를 지정하는 속성으로, 서로 겹치는 요소가 있을 때 어떤 요소가 위에 보일지를 결정합니다. 기본적으로 HTML 요소들은 작성된 순서대로 아래에 쌓이지만, position 속성이 relative, absolute, fixed, sticky 중 하나일 때 z-index를 사용할 수 있습니다. 값이 클수록 위쪽(앞쪽)에 표시되고, 값이 작을수록 아래쪽(뒤쪽)에 위치합니다. 예를 들어 두 개의 박스가 겹칠 때 하나에 z-index: 10을 주고 다른 하나에 z-index: 1을 주면, 10을 가진 박스가 위에 나타납니다. 이를 활용하면 모달 창, 드롭다운, 툴팁, 고정된 메뉴 등에서 레이어 순서를 정밀하게 제어할 수 있습니다.
2. fixed
fixed는 CSS의 position 속성 중 하나로, 브라우저 화면(뷰포트)을 기준으로 요소를 고정시키는 방식입니다. position: fixed가 적용된 요소는 스크롤을 하더라도 항상 같은 위치에 고정되어 표시되며, 일반적인 문서 흐름에서 완전히 벗어나기 때문에 다른 요소들과 겹치거나 겹쳐질 수 있습니다. 주로 상단 고정 네비게이션 바, 하단 고정 퀵 메뉴, 떠다니는 버튼(FAB) 등을 구현할 때 사용되며, top, right, bottom, left 속성을 이용해 원하는 위치에 배치할 수 있습니다. 단, 고정된 위치는 부모 요소가 아닌 브라우저 창 자체를 기준으로 하므로 반응형 디자인 시 주의가 필요합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>position: fixed 예제 (JS 없이)</title>
<style>
body {
margin: 0;
padding: 20px;
font-family: Arial, sans-serif;
line-height: 2;
}
.content {
height: 2000px;
}
.fixed-button {
position: fixed;
bottom: 20px;
right: 20px;
background-color: #4caf50;
color: white;
padding: 10px 20px;
border-radius: 8px;
text-decoration: none;
font-weight: bold;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.fixed-button:hover {
background-color: #388e3c;
}
</style>
</head>
<body>
<div class="content">
<h1>스크롤을 내려보세요</h1>
<p>이 페이지는 `position: fixed` 속성을 테스트하기 위한 예제입니다.</p>
</div>
<a href="#" class="fixed-button">⬆ 위로 가기</a>
</body>
</html>
3. sticky
sticky는 CSS의 position 속성 중 하나로, 스크롤 위치에 따라 요소가 고정되었다가 다시 움직이게 만드는 하이브리드 위치 지정 방식입니다. position: sticky를 사용하면 요소는 처음에는 일반적인 흐름대로 배치되지만, 사용자가 스크롤을 내려 요소가 지정한 위치(top, left 등)에 도달하면 그 지점에 고정(stick)되어 화면에 머물다가, 부모 요소의 영역을 벗어나면 다시 함께 스크롤됩니다. 주로 섹션 제목이나 테이블 헤더, 네비게이션 바 등이 스크롤 시 상단에 고정되도록 할 때 사용되며, fixed처럼 항상 고정되지 않고, 일정 지점에서만 고정되는 점이 차이점입니다. 부모 요소의 overflow 설정이나 height가 없을 경우 sticky가 작동하지 않을 수 있어 주의가 필요합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>Sticky 상단 메뉴 예제</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
line-height: 1.6;
}
/* Sticky Header */
header {
position: sticky;
top: 0;
background-color: #4caf50;
padding: 15px 20px;
color: white;
font-weight: bold;
display: flex;
gap: 20px;
z-index: 1000;
}
header a {
color: white;
text-decoration: none;
}
header a:hover {
text-decoration: underline;
}
.content {
padding: 20px;
}
.section {
height: 800px;
border-bottom: 1px solid #ccc;
}
</style>
</head>
<body>
<header>
<a href="#">홈</a>
<a href="#">소개</a>
<a href="#">서비스</a>
<a href="#">문의</a>
</header>
<div class="content">
<div class="section">
<h2>섹션 1</h2>
<p>스크롤을 내려보세요. 메뉴가 상단에 고정된 채 따라옵니다.</p>
</div>
<div class="section">
<h2>섹션 2</h2>
<p>
Sticky 메뉴는 화면 위쪽에 계속 유지되며, 콘텐츠를 볼 수 있게 해줍니다.
</p>
</div>
<div class="section">
<h2>섹션 3</h2>
<p>이런 방식은 실제 웹사이트에서도 네비게이션 바로 많이 사용됩니다.</p>
</div>
</div>
</body>
</html>
4. absolute
absolute는 CSS의 position 속성 중 하나로, 요소를 문서의 일반적인 흐름에서 제거하고, 가장 가까운 position이 지정된 조상 요소를 기준으로 절대적인 위치에 배치할 수 있게 해주는 속성입니다. 만약 조상 중에 position: relative, absolute, fixed 등을 가진 요소가 없다면, 기준은 브라우저의 전체 문서(body)가 됩니다. top, right, bottom, left 속성과 함께 사용하여 원하는 위치에 정확하게 배치할 수 있으며, 다른 요소들과 겹치거나 자유롭게 이동시킬 수 있는 유용한 도구입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>position: absolute 예제</title>
<style>
.container {
position: relative; /* 기준점 역할 */
width: 300px;
height: 200px;
background-color: #f0f0f0;
border: 2px solid #333;
margin: 50px auto;
}
.absolute-box {
position: absolute;
bottom: 10px;
right: 10px;
background-color: #4caf50;
color: white;
padding: 10px 15px;
border-radius: 5px;
font-size: 0.9rem;
}
</style>
</head>
<body>
<div class="container">
부모 박스 (position: relative)
<div class="absolute-box">절대 위치 박스</div>
</div>
</body>
</html>