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

이 레이아웃에서는:

• .sidebar 固定在页面左侧并在滚动时保持可见。
• .content 区域相对定位并调整其边距以适应侧边栏。

---

练习运动

1. 创建一个具有固定页眉和页脚的网页，并对内容使用相对和绝对定位。
2. 添加滚动时固定的粘性侧边栏。

---

下一步：在下一堂课中，我们将深入探讨CSS 变换和动画，您将在其中学习如何轻松为 Web 元素设置动画。准备好让您的设计充满活力和互动！

---

在 LinkedIn 上关注我
里多伊·哈桑

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