> 일반적인 문제 > 위치의 용도는 무엇입니까

위치의 용도는 무엇입니까

尊渡假赌尊渡假赌尊渡假赌
풀어 주다: 2023-12-05 11:08:55
원래의
1706명이 탐색했습니다.

Position에는 "정적", "상대적", "절대", "고정" 및 "고정"의 5가지 용도가 있습니다. 1. 특별한 위치 지정이 없음을 의미하는 정적 기본값 2. 요소에 상대적임을 의미하는 상대 위치 지정; 문서 흐름에서의 위치 3. 절대 절대 위치 지정, 이는 가장 가까운 비정적 위치의 조상 요소 등을 기준으로 위치 지정을 의미합니다.

위치의 용도는 무엇입니까

이 튜토리얼의 운영 체제: Windows 10 시스템, Dell G3 컴퓨터.

CSS에서 위치 속성은 다음과 같은 용도로 사용됩니다.

  1. static: 기본값, 요소는 문서 흐름에 따라 정상적으로 정렬되며 특별한 위치 지정이 수행되지 않습니다.

  2. relative: 상대 위치 지정, 요소는 문서 흐름의 일반 위치를 기준으로 위치가 지정됩니다. 상단, 오른쪽, 하단 및 왼쪽 속성을 사용하여 일반 위치를 기준으로 요소의 오프셋을 조정할 수 있습니다.

  3. absolute: 절대 위치 지정, 요소는 가장 가까운 비정적 위치 지정 상위 요소를 기준으로 위치가 지정됩니다. 비정적으로 위치된 조상 요소가 없으면 문서의 초기 포함 블록을 기준으로 위치가 지정됩니다. 위쪽, 오른쪽, 아래쪽 및 왼쪽 특성을 사용하여 위치가 지정된 상위 요소를 기준으로 요소의 오프셋을 지정할 수 있습니다.

  4. fixed: 고정 위치 지정, 요소는 브라우저 창을 기준으로 위치가 지정되고 페이지가 스크롤되더라도 고정 위치에 유지됩니다. 상단, 오른쪽, 하단 및 왼쪽 속성을 사용하여 브라우저 창을 기준으로 요소의 오프셋을 지정할 수 있습니다.

  5. 고정: 고정 위치 지정, 요소는 스크롤이 특정 임계값에 도달한 후 고정 위치가 될 때까지 스크롤 위치에 따라 문서 흐름에 배치됩니다. 위쪽, 오른쪽, 아래쪽 및 왼쪽 속성을 사용하여 위치가 지정된 상위 요소 또는 뷰포트를 기준으로 요소의 오프셋을 지정할 수 있습니다.

적절한 오프셋 속성과 결합된 이러한 위치 지정 방법을 사용하면 부동 효과 생성, 고정 탐색 표시줄, 절대 위치 팝업 상자 등과 같은 다양하고 복잡한 레이아웃 효과를 얻을 수 있습니다.

위 내용은 위치의 용도는 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿