CSS의 상대 위치와 절대 위치 지정: 차이점은 무엇입니까?

위치 이해: CSS의 상대 위치와 절대 위치

CSS 위치 지정을 사용하면 웹 페이지에서 요소의 위치를 ​​정의할 수 있습니다. 위치: 상대 및 위치: 절대는 일반적으로 사용되는 두 가지 위치 지정 옵션이지만 동작과 목적이 다릅니다.

위치: 절대

위치: 절대를 설정하는 경우 , 요소는 문서의 일반적인 흐름에서 제거되고 페이지의 정확한 위치에 배치됩니다. 네 가지 위치 지정 속성(상단, 오른쪽, 하단, 왼쪽)은 브라우저 뷰포트 또는 상위 컨테이너(위치가 재정의된 컨테이너가 있는 경우)를 기준으로 요소의 위치를 ​​결정하기 위한 오프셋으로 사용됩니다.

위치 사용 시기: 절대:

• 페이지의 특정 위치에 요소를 정확하게 배치하려면 flow.
• 다른 페이지 콘텐츠와 겹칠 수 있는 플로팅 요소를 생성합니다.

위치: 상대

위치: 상대, 요소 문서의 일반적인 흐름을 유지하지만 위치는 원래 위치를 기준으로 조정됩니다. 위치 지정 속성은 절대 위치 지정과 동일하게 작동하지만 흐름의 현재 위치에서 요소 위치를 오프셋합니다.

사용 시기 위치: 상대:

• 문서 흐름에서 요소를 제거하지 않고 요소의 위치를 ​​이동합니다.
• 드롭다운 메뉴 또는 표시되는 기타 요소를 생성하려면 상위 요소를 기준으로 합니다.

주요 차이점:

• 절대 위치 지정은 요소를 일반 흐름에서 제거하는 반면 상대 위치 지정은 요소를 상위 요소에 유지합니다. flow.
• 절대 위치 지정은 뷰포트 또는 상위 컨테이너를 기준으로 요소의 위치를 ​​결정하는 반면, 위치 지정은 흐름의 현재 위치에서 요소를 이동시킵니다.
• 절대 위치 지정이 있는 요소는 콘텐츠에 따른 기본 너비를 갖는 반면 상대적으로 위치 지정되는 요소는 100%의 기본 너비를 갖습니다.

위 내용은 CSS의 상대 위치와 절대 위치 지정: 차이점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!