CSS에서 정적, 상대, 절대 및 고정 위치 지정은 어떻게 다릅니까?

CSS의 정적 위치와 상대 위치 지정

정적 위치 지정은 HTML 요소의 기본 위치 지정입니다. 정적 위치 지정이 있는 요소는 왼쪽, 위쪽, 오른쪽, 아래쪽 규칙에 관계없이 페이지의 일반적인 흐름에 따라 표시됩니다.

반면에 상대 위치 지정을 사용하면 페이지를 기준으로 오프셋을 지정할 수 있습니다. HTML 흐름에서 요소의 일반 위치입니다. 이를 통해 문서 레이아웃에서 해당 위치를 유지하면서 요소를 특정 위치로 이동할 수 있습니다.

예를 들어 상대 위치 지정을 사용하여 div 내의 텍스트 상자를 일반 기준을 기준으로 특정 지점으로 이동할 수 있습니다.

반대로, 전체 문서를 기준으로 요소의 정확한 위치를 지정하거나 상대적으로 배치된 첫 번째 상위 요소를 지정할 수 있는 절대 위치 지정도 있습니다. 절대 위치 지정을 사용하면 요소가 HTML 흐름에서 제거되고 페이지의 어느 곳에나 배치할 수 있습니다.

또한 고정 위치 지정은 페이지가 스크롤되는 경우에도 요소를 뷰포트의 특정 위치로 제한합니다. 고정 위치 요소도 HTML 흐름에서 제거되지만 뷰포트에 바인딩되지 않으며 페이지와 함께 스크롤되지 않습니다.

요약하자면 정적 위치 지정은 요소의 일반적인 흐름을 유지하는 반면 상대 위치 지정은 허용합니다. 흐름 내에서 요소를 이동할 수 있으며 절대 위치 지정을 통해 문서의 특정 위치에 요소를 배치할 수 있습니다. 고정 위치 지정은 흐름에서 요소를 제거하고 뷰포트의 특정 위치로 제한합니다.

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