CSS에서 고정 위치를 설정하는 방법

CSS에서 고정 위치 지정을 설정하는 방법: CSS 선택기에서 [위치:고정]을 직접 작성하세요. 고정 위치 지정은 상대 위치 지정과 고정 위치 지정의 혼합으로 생각할 수 있습니다. 여기서 요소는 특정 임계값을 넘을 때까지 상대적으로 위치를 지정한 다음 고정됩니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, CSS3 버전 이 방법은 모든 브랜드의 컴퓨터에 적합합니다.

(동영상 공유 학습: css 동영상 튜토리얼)

Css에서 고정 위치 설정 방법:

CSS 선택기에서 position:sticky를 직접 작성하세요.

고정 위치 지정은 상대적 위치 지정과 고정 위치 지정의 하이브리드로 생각할 수 있습니다. 요소는 특정 임계값을 넘을 때까지 상대적으로 배치된 다음 고정적으로 배치됩니다. 이 특정 임계값은 위쪽, 오른쪽, 아래쪽 또는 왼쪽 중 하나를 나타냅니다. 즉, 고정 위치 지정은 위쪽, 오른쪽, 아래쪽 또는 왼쪽의 4개 임계값 중 하나를 지정해야만 적용됩니다. 그렇지 않으면 동작은 상대 위치 지정과 동일합니다.

스티키 포지셔닝에는 "플로우 박스"라는 개념이 있는데, 이는 스티키 포지셔닝 요소(오버플로 속성 값이 표시되지 않는 요소)에 가장 가까운 스크롤 가능 요소의 크기 상자를 의미합니다. 이는 브라우저 창 상자를 의미합니다.

css 선택기에 position:sticky를 직접 작성하세요. 주요 요점은 다음 사항을 강조하는 것입니다.

1. 끈적끈적한 요소의 위치는 첫 번째 스크롤되는 상위 블록 요소에 대해서만 지정됩니다. 상위 블록 요소가 아닌 오버플로/스크롤/자동/오버레이 요소로 설정된 오버플로를 통한 스크롤 메커니즘입니다. 코드펜 예시

2. 해당 방향(위/오른쪽/아래/왼쪽)이 설정된 경우에만 작동하며, 서로 겹쳐질 수 있으며, 4가지 방향을 동시에 설정할 수도 있습니다.

3. 위치: 고정이 설정되어 있어도 음수 값을 설정하지 않는 한 상위 블록 요소의 콘텐츠 영역에만 표시될 수 있습니다.

4. 위치: 끈적임은 bfc를 실행하지 않습니다. 간단히 말해, 높이를 계산할 때 부동 요소는 계산되지 않습니다.

5. position on:sticky가 설정되면 내부 위치 지정은 이 요소를 기준으로 합니다(코드펜 예).

6. position:sticky는 상대 또는 고정처럼 동작하지만 z-index 수준을 통해 설정할 수도 있습니다. 이 요소 뒤에 있는 형제 노드가 이 요소를 덮을 때 레벨은 z-인덱스를 통해 조정될 수 있습니다. (코드펜 예시)

7. 고정 레이아웃 요소의 상위 요소가 가시 범위 내에 있으면 해당 요소의 레이아웃은 상대적이며, 그렇지 않으면 고정됩니다.

관련 권장 사항: CSS 튜토리얼

위 내용은 CSS에서 고정 위치를 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!