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

강의 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;
  }

이 예에서는:

.box는 .container 요소
• 내부 위에서 50px, 오른쪽에서 20px 떨어진 위치에 절대 위치합니다.
.container에는 상대 위치가 있어 .box에 대한 위치 지정 참조가 됩니다.

---

4. 고정 위치

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

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

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

이 예에서는:

.navbar는 뷰포트 상단에 위치하며 페이지를 스크롤해도 고정된 상태로 유지됩니다.

---

5. 고정 포지셔닝

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

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

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

이 예에서는:

.header는 페이지 상단에 도달할 때까지 일반 요소처럼 동작합니다. 그 후에는 상단에 붙어 사용자가 스크롤해도 계속 표시됩니다.

---

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;
  }

이 예에서는:

.box2는 Z-색인 값이 더 높기 때문에 .box1 위에 표시됩니다.

---

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;
  }

이 레이아웃에서는:

• .사이드바는 페이지 왼쪽에 고정되어 스크롤할 때 계속 표시됩니다.
• .content 영역은 상대적인 위치에 있으며 사이드바를 고려하여 여백을 조정합니다.

---

연습

1. 머리글과 바닥글이 고정된 웹페이지를 만들고 콘텐츠의 상대 및 절대 위치 지정을 사용하세요.
2. 스크롤 시 고정되는 고정 사이드바를 추가하세요.

---

다음: 다음 강의에서는 CSS 변환 및 애니메이션에 대해 자세히 알아보고 웹 요소에 쉽게 애니메이션을 적용하는 방법을 배우겠습니다. 역동적이고 상호작용적인 디자인을 만들 준비를 하세요!

---

LinkedIn에서 나를 팔로우하세요
리도이 하산

위 내용은 CSS 위치 지정 – 절대, 상대, 고정 및 고정.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!