CSS 포지셔닝: 정확히 어디로 가고 있다고 생각하시나요?

✨
이 기사는 내 웹사이트에서 볼 수 있는 더 큰 시리즈의 일부입니다. CSS 101: 시리즈에 대해 자세히 알아보려면 여기를 클릭하세요. 완전 무료입니다!

웹 요소의 건축가이자 디자이너 역할을 할 수 있는 마법의 CSS 포지셔닝 영역에 오신 것을 환영합니다! 해당 버튼을 원하는 위치에 정확하게 배치하는 방법이나 헤더가 벗어나지 않도록 하는 방법에 대해 궁금하신 경우, 잘 찾아오셨습니다. 재치와 재미를 더해 CSS 위치 지정의 기본을 살펴보겠습니다.

1. 정적 위치 지정: 기본 설정

정적 위치 지정은 TV의 기본 설정과 같습니다. 화려할 것도 없고 그냥 기본적이고 간단합니다. 기본적으로 모든 요소는 정적으로 배치됩니다. 이는 예상한 대로 문서 내에서 차례대로 흐른다는 의미입니다.

div {
    position: static;
}

position: static;을 사용하면 기본적으로 브라우저가 자연스럽게 요소를 일반 위치에 배치하도록 지시하는 것입니다. 포지셔닝의 "여기서 볼 게 없다" 입니다.

2. 상대적 위치 지정: 약간 변덕스러운 친구

상대적 위치 지정은 항상 약간 엉뚱하지만 매력적인 친구를 갖는 것과 같습니다. 페이지의 나머지 부분을 방해하지 않고 일반적인 위치를 기준으로 요소를 이동할 수 있습니다.

.relative-box {
    position: relative;
    top: 10px;
    left: 20px;
}

여기서 .relative-box는 원래 위치에서 아래로 10픽셀, 오른쪽으로 20픽셀 이동합니다. 주변의 나머지 요소는 여전히 원래 위치에 있습니다.

3. 절대적인 포지셔닝: 자유를 추구하는 사람

절대 포지셔닝은 군중을 따르지 않는 모험심이 강한 친구와 같습니다. 가장 가까운 "비정적" 조상(즉, 위치가 상대, 절대, 고정 또는 고정인 조상)을 기준으로 원하는 위치에 요소를 배치할 수 있습니다.

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

.parent {
    position: relative;
}

.child {
    position: absolute;
    top: 30px;
    right: 10px;
}

이 예에서 .child는 .parent의 위쪽에서 30픽셀, 오른쪽에서 10픽셀 떨어진 곳에 위치합니다. .parent가 없으면 가장 가까운 위치의 조상이나 뷰포트를 기준으로 배치됩니다.

프로팁?
요소가 변환이 적용된 상위 요소 내부에 절대적으로 배치되면 원래 문서 흐름이 아닌 변환된 상위 요소를 기준으로 배치됩니다. 예상치 못한 레이아웃 변경 및 위치 지정 문제를 방지하려면 이 동작에 주의하세요.

4. 고정 위치: 완고한 정적

고정된 위치는 마음에 드는 의자를 절대 움직이지 않는 것과 같습니다. 뷰포트를 기준으로 요소를 배치할 수 있으므로 아무리 스크롤해도 같은 위치에 유지됩니다.

.floating-action-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
}

위치: 고정;을 사용하면 아래로 스크롤하더라도 .floating-action-button은 뷰포트 하단에서 20픽셀, 오른쪽에서 20픽셀 떨어진 곳에 유지됩니다. 사이트 헤더, 채팅 위젯, 지속적인 클릭 유도 버튼과 같은 끈적한 요소에 적합합니다.

5. 고정 포지셔닝: 두 세계 모두의 장점

고정적인 위치는 항상 부분적으로 스포트라이트를 받고 있는 친구를 갖는 것과 같습니다. 상대위치와 고정위치의 하이브리드라고 생각하시면 됩니다. 위치: 고정 요소는 스크롤하여 특정 지점을 지나갈 때 컨테이너 내의 해당 위치에 고정되지만, 그렇지 않으면 상대적으로 위치가 지정된 요소처럼 동작합니다.

.sticky-box {
    position: sticky;
    top: 0;
}

이 예에서 .sticky-box는 스크롤하면 컨테이너 상단에 고정되고 계속 스크롤할 때 컨테이너 상단에 유지되지만 컨테이너가 표시되는 동안에만 해당됩니다. 컨테이너가 보기 밖으로 스크롤되면 고정 요소도 함께 스크롤됩니다. 페이지의 특정 섹션 내에서 계속 표시하려는 헤더, 탐색 메뉴 또는 사이드바에 적합합니다.

Z-색인: 초과 성취자

아, Z-index! 이것은 상황이 약간 경쟁적이 되는 곳입니다. 요소가 겹치면 z-index에 따라 어느 요소가 맨 위에 놓일지 결정됩니다. 고등학교 인기 콘테스트와 같지만 웹 요소에 대한 것입니다.

.box1 {
    position: absolute;
    z-index: 10;
}

.box2 {
    position: absolute;
    z-index: 5;
}

이 경우 .box1은 Z-색인이 더 높기 때문에 .box2 위에 표시됩니다. z-index는 위치가 지정된 요소(상대, 절대, 고정 또는 고정)에서만 작동한다는 점을 기억하세요.

프로팁?
z-index에는 위에서 설명한 것보다 더 많은 것이 있습니다. 복잡한 레이아웃에서 Z-색인이 작동하는 방식을 더 완벽하게 이해할 수 있는 "스태킹 컨텍스트"에 대한 심층 분석을 계속 지켜봐 주시기 바랍니다.

마무리

CSS 위치 지정은 퍼즐처럼 보일 수 있지만 일단 익숙해지면 요소를 정확하고 능숙하게 배치할 수 있습니다. 각 직위 유형에는 웹 디자인에서 고유한 특별한 역할이 있습니다. 이를 시험해보고 웹페이지를 제대로 보이게 만드는 방법을 알아보세요.

즐거운 코딩하세요!

✨
쉿! 읽은 내용이 마음에 들었다면 여기를 클릭하여 CSS 101: The Series를 확인하세요. 완전 무료입니다!

위 내용은 CSS 포지셔닝: 정확히 어디로 가고 있다고 생각하시나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!