sliver__

CSS Positioning 기초부터 활용까지 본문

Frontend/CSS

CSS Positioning 기초부터 활용까지

sliver__ 2025. 5. 2. 16:06
728x90

1. 포지셔닝 모드 종류

  • Normal flow (기본 흐름)
    • HTML 소스 순서대로 배치
    • position: static (기본값) 또는 position: relative로 유지하면 이 흐름
  • Absolute positioning (절대 위치 지정)
    • position: absolute를 주면 흐름에서 제거(out‑of‑flow)
    • 주변 요소에 영향을 주지 않고, 마음대로 겹치거나 이동 가능

2. Absolute 요소 위치 지정 방법

  1. position: absolute 선언
  2. top, right, bottom, left 속성으로 위치 설정
    • 기본 기준은 뷰포트(viewport)
    • 예)
     
  3. 포지셔닝 컨테이너 지정
    • 절대 위치 요소는 ‘가장 가까운’ position: relative 부모를 기준으로 움직임
    • 없으면 뷰포트 기준
.btn-like {
  position: absolute;
  top: 50px;
  right: 50px;
}

3. 예제: 좋아요 버튼 배치하기

3‑1. HTML 마크업

<body>
  <!-- 기존 콘텐츠 -->
  <div class="container">…</div>

  <!-- 절대 위치 버튼 -->
  <button class="btn-like">❤️ Like</button>
</body>

3‑2. CSS 기본 스타일 

.btn-like {
  padding: 8px 12px;
  cursor: pointer;
  /* 절대 위치 지정 준비 */
  position: absolute;
  top: 0;
  left: 0;
}
  • 이 상태면 뷰포트 왼쪽 위(0,0)에 고정

3‑3. 뷰포트 아닌 특정 영역 기준으로

/* 기준 컨테이너에 relative 지정 */
.container {
  position: relative;
}

/* 버튼은 .container 안에서 아래‑오른쪽(50px씩) */
.btn-like {
  position: absolute;
  bottom: 50px;
  right: 50px;
}
  • .container 내부의 오른쪽 아래에 고정됨
  • 다른 부모 요소(header 등)에도 같은 방법 적용 가능

4. 시각적 정리

[ relative 컨테이너 ]
┌─────────────────────────┐
│                         │
│   ┌─────────────────┐   │
│   │ position:       │   │
│   │ absolute; top:100px;│
│   │ left:200px;     │   │
│   └─────────────────┘   │
│                         │
└─────────────────────────┘
  • 상대(relative) 컨테이너 위에
  • 절대(absolute) 요소가 지정된 거리만큼 띄워져 배치

5. 주의사항 & 팁

  • 레이아웃 전체를 absolute에 의존하면 유지보수가 어려워집니다.
  • 단일 요소(버튼, 툴팁 등)에만 사용하고, 주된 레이아웃은 Flexbox / Grid 등으로 구성하세요.
  • position: relative는 흐름에 영향을 주지 않고, 컨테이너 기준점 역할만 합니다.
728x90

'Frontend > CSS' 카테고리의 다른 글

CSS Float 속성 완전 정복! – 플로트 레이아웃 기본 이해  (0) 2025.05.02
웹 페이지 레이아웃 완전 정복! - CSS 레이아웃 기초  (0) 2025.05.02
CSS 박스 타입 3가지: Block · Inline · Inline-Block  (0) 2025.05.02
CSS로 페이지를 가운데 정렬하는 간단한 트릭  (0) 2025.05.02
CSS에서 width와 height로 요소 크기 조절하는 법  (0) 2025.05.02
'Frontend/CSS' Related Articles more
Comments