CSS의 Position 속성

Notice

Recent Posts

Recent Comments

Link

« 2026/05 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31

Tags more

Archives

Today

Total

관리 메뉴

無제

CSS의 Position 속성 본문

<style>

CSS의 Position 속성

yo-u-loo 2026. 3. 19. 16:18

🟢 Position 속성

요소가 문서 안에서 어떻게 위치할지를 정의.

🔹 position 종류와 특징

속성값	설명	top/right/bottom/left 사용	문서 흐름 영향	활용 예시
static	일반 문서 흐름대로 배치 (기본값)	❌ 무시됨	일반	대부분 초기 상태
relative	원래 자리 기준으로 이동 가능	✅ 상대 이동	❌ 자리 차지 유지	tooltip 기준, 미세 위치 조정
absolute	가장 가까운 위치 지정 부모 기준 배치	✅ 위치 지정	✅ 부모 기준으로 독립	dropdown, modal, 카드 배치
fixed	뷰포트 기준 독립 배치, 스크롤 영향 없음	✅ 위치 지정	✅ 독립	sticky header, 스크롤 버튼
sticky	스크롤 시 기준 위치까지 따라가다 고정	✅ top 등 필요	❌ 부모 내에서	헤더 고정, 테이블 헤더

🔹 position 활용 구조

1️⃣ 부모-자식 관계 설정

<div class="parent">
  <div class="child"></div>
</div>

부모: position: relative → 기준점.
자식: position: absolute → 부모 기준 자유 배치.

2️⃣ 부모 요소에 position: relative 설정

#parent {
  position: relative;
  width: 400px;
  height: 300px;
  background: #d0e6ff;
}

3️⃣ 자식 요소에 position: absolute 설정

#child {
  position: absolute;
}

4️⃣ 자식 요소의 좌표를 조정

#child {
  position: absolute;
  top: 20px;      /* 부모 상단에서 20px */
  right: 30px;    /* 부모 오른쪽에서 30px */
  width: 100px;
  height: 50px;
  transform: translate(-50%, -50%);
  background: #ffb347;
}

top/right/bottom/left 위치 조정.
중앙 정렬: transform 함께 사용.

👉 이제 원하는 포지션을 자유롭게 배치할 수 있다.

✅ 실무 꿀팁 ✅

부모가 <body> → relative 생략 가능

absolute + z-index → 겹치는 요소 순서 제어

sticky → 특정 스크롤 위치에서 고정

fixed → 뷰포트 기준 고정, 스크롤과 무관

relative + absolute 조합 → tooltip, modal, popup 구현

🔸 z-index

같은 쌓임 맥락(stacking context) 안에서의 레이어 순서를 정하는 값

1️⃣ position 설정 (필수)

.box {
  position: relative; /* 또는 absolute, fixed, sticky */
}

z-index는 position이 설정된 요소에서만 동작
position: static (기본값)에서는 거의 의미 없음

2️⃣ z-index 값 지정

.box1 {
  position: relative;
  z-index: 1;
}

.box2 {
  position: absolute;
  z-index: 10;
}
/* box2가 box1 위에 표시 */

값이 클수록 위(앞)에 보임
값이 작을수록 아래(뒤)에 깔림
- 양수 → 위로 올라감
- 0 → 기본 레벨
- 음수 → 뒤로 감
겹치는 요소끼리만 의미 있음

🖥️ Self training 🖥️

https://www.w3schools.com/css/css_position_offset.asp

CSS display: inline-block

https://www.w3schools.com/css/css_inline-block.asp

CSS Box Model

https://www.w3schools.com/css/css_boxmodel.asp

CSS Borders

https://www.w3schools.com/css/css_border.asp

CSS Margins

https://www.w3schools.com/css/css_margin.asp

CSS Padding

https://www.w3schools.com/css/css_padding.asp

CSS The display Property

https://www.w3schools.com/css/css_display.asp

CSS Float

https://www.w3schools.com/css/css_float.asp

'<style>' 카테고리의 다른 글

gradients 함수 (0)	2026.03.20
background 속성 (0)	2026.03.20
float 속성 (0)	2026.03.19
display 속성 (0)	2026.03.19
Box Model의 padding 속성 (0)	2026.03.18

'<style>' Related Articles

無제

CSS의 Position 속성 본문

CSS의 Position 속성

🟢 Position 속성

🖥️ Self training 🖥️

'<style>' 카테고리의 다른 글

티스토리툴바