CSS 위치 지정 – 절대, 상대, 고정 및 고정.-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS 위치 지정 – 절대, 상대, 고정 및 고정.

PHPz

Sep 10, 2024 pm 06:00 PM

CSS Positioning – Absolute, Relative, Fixed, and Sticky.

강의 11: CSS 위치 지정 - 절대, 상대, 고정 및 고정

"Basic to Brilliance" 강좌 열한 번째 강의에 오신 것을 환영합니다. 이번 강의에서는 CSS 포지셔닝의 다양한 유형인 상대, 절대, 고정, 고정. 위치 지정을 이해하면 페이지에서 요소가 나타나는 위치와 사용자가 콘텐츠와 상호 작용할 때 요소가 어떻게 작동하는지 제어할 수 있습니다.

1. 위치속성 이해

위치 속성은 문서에서 요소의 위치를 지정합니다. 다음 값을 사용할 수 있습니다.

정적: 기본값입니다. 요소는 일반적인 문서 흐름에 따라 배치됩니다.
상대: 요소가 정상 위치를 기준으로 배치됩니다.
절대: 요소는 가장 가까운 위치의 조상 또는 초기 포함 블록을 기준으로 배치됩니다.
고정: 요소는 브라우저 창을 기준으로 위치가 지정되고 스크롤할 때 동일한 위치에 유지됩니다.
고정: 요소는 임계값(예: 스크롤 위치)에 도달할 때까지 상대 요소로 처리된 다음 고정됩니다.

2. 상대 위치 지정

위치가 상대인 요소는 원래(정적) 위치를 기준으로 배치됩니다. 문서 흐름에 남아 있으므로 다른 요소도 계속 고려됩니다.

예: 상대 위치 지정을 사용하여 요소를 이동합니다.

  .box {
    position: relative;
    top: 20px; /* Moves the box 20px down from its normal position */
    left: 30px; /* Moves the box 30px to the right */
  }

이 예에서는 요소가 원래 위치에서 아래로 20픽셀, 오른쪽으로 30픽셀 이동하지만 문서 흐름에서 해당 요소의 공간은 유지됩니다.

3. 절대 포지셔닝

위치가 절대인 요소는 문서 흐름에서 제거되고 가장 가까운 위치의 상위 요소(예: 정적 위치가 아닌 상위 요소)를 기준으로 배치됩니다.

예: 컨테이너 내부에 요소를 절대적으로 배치합니다.

  .container {
    position: relative; /* This container is the reference for the absolute positioning */
    width: 300px;
    height: 200px;
    background-color: #f4f4f4;
  }

  .box {
    position: absolute;
    top: 50px;
    right: 20px;
    background-color: #333;
    color: white;
    padding: 10px;
  }

이 예에서는:

내부 위에서 50px, 오른쪽에서 20px 떨어진 위치에 절대 위치합니다.

4. 고정 위치

위치가 고정된 요소는 페이지 스크롤 방식에 관계없이 브라우저 창을 기준으로 배치됩니다.

예: 고정 탐색 모음 만들기.

  .navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #333;
    color: white;
    padding: 15px;
    text-align: center;
  }

이 예에서는:

5. 고정 포지셔닝

위치: 고정 요소는 사용자가 정의된 임계값을 지나 스크롤할 때까지 상대 요소로 처리되며, 이 지점에서 고정됩니다.

예: 스크롤 후에도 상단에 유지되는 고정 헤더.

  .header {
    position: sticky;
    top: 0;
    background-color: #333;
    color: white;
    padding: 10px;
  }

이 예에서는:

6. Z-인덱스

요소가 배치되면(상대, 절대, 고정 또는 고정) Z-색인 속성을 사용하여 스택 순서를 제어할 수 있습니다. Z-인덱스 값이 높을수록 요소가 낮은 요소 위에 표시됩니다.

예: 쌓이는 순서 제어.

  .box1 {
    position: absolute;
    top: 50px;
    left: 50px;
    z-index: 1; /* Lower z-index */
    background-color: #f4f4f4;
    padding: 20px;
  }

  .box2 {
    position: absolute;
    top: 80px;
    left: 80px;
    z-index: 2; /* Higher z-index */
    background-color: #333;
    color: white;
    padding: 20px;
  }

이 예에서는:

7. 포지셔닝 기술 결합

포지셔닝 값을 결합하여 고급 레이아웃을 만들 수 있습니다.

예: 관련 콘텐츠 영역이 있는 고정 사이드바.

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 200px;
    height: 100vh;
    background-color: #333;
    color: white;
    padding: 20px;
  }

  .content {
    position: relative;
    margin-left: 220px; /* Account for the fixed sidebar */
    padding: 20px;
  }

이 레이아웃에서는: