상위 요소가 위치를 설정해야 하는 이유는 무엇입니까?

상위 요소는 위치를 설정하여 하위 요소의 위치와 레이아웃을 제어합니다. 값에 따라 용도가 다릅니다. 1. 일반적인 문서 흐름에 따라 요소를 배치할 수 있고 다른 위치 지정 속성의 영향을 받지 않는 정적 2. 하위 요소와 제어를 래핑하기 위해 상대적으로 배치된 컨테이너를 생성하는 상대; 3. 절대, 하위 요소의 정확한 위치 지정을 제어하는 ​​데 사용되는 절대 위치 컨테이너 생성 4. 고정, 페이지에 고정 요소 생성에 사용되는 고정 위치 컨테이너 생성

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

상위 요소의 위치 속성을 설정하는 목적은 하위 요소의 위치와 레이아웃을 제어하는 ​​것입니다. 위치 속성은 요소의 위치 지정 방법을 변경하는 데 사용할 수 있습니다. 일반적인 값에는 정적, 상대, 절대 및 고정이 포함됩니다.

1. 정적:

static은 위치 속성의 기본값입니다. 요소는 일반적인 문서 흐름에 따라 배치되며 다른 위치 지정 속성의 영향을 받지 않습니다. 상위 요소가 위치 속성을 설정하지 않은 경우 하위 요소의 위치도 일반적인 문서 흐름에 따라 배치됩니다. 즉, 하위 요소는 HTML의 순서에 따라 정렬됩니다.

2. 상대:

상위 요소가 위치 속성을 상대로 설정하면 위쪽, 오른쪽, 아래쪽 및 왼쪽 속성을 설정하여 하위 요소의 위치가 상위 요소를 기준으로 오프셋될 수 있습니다. 이 위치 지정 방법은 문서 흐름에서 하위 요소의 위치를 ​​변경하지 않지만 상위 요소를 기준으로 오프셋됩니다.

상위 요소에 대해 position:relative를 설정하는 일반적인 애플리케이션 시나리오는 하위 요소를 래핑하고 해당 레이아웃을 제어하기 위해 상대적으로 위치가 지정된 컨테이너를 만드는 것입니다. 하위 요소의 위쪽, 오른쪽, 아래쪽 및 왼쪽 특성을 설정하면 상위 요소를 기준으로 하위 요소의 위치 및 레이아웃을 구현할 수 있습니다.

3. 절대:

상위 요소가 위치 속성을 절대값으로 설정하면 하위 요소의 위치 지정이 가장 가까운 위치의 상위 요소를 기준으로 오프셋될 수 있습니다. 위치가 지정된 상위 요소가 없는 경우 하위 요소의 위치는 문서의 원래 포함 블록을 기준으로 오프셋됩니다.

상위 요소에 position:absolute를 설정하는 일반적인 애플리케이션 시나리오는 하위 요소의 정확한 위치 지정을 제어하기 위해 절대 위치 지정 컨테이너를 만드는 것입니다. 하위 요소의 위쪽, 오른쪽, 아래쪽 및 왼쪽 특성을 설정하면 상위 요소 또는 문서의 초기 포함 블록을 기준으로 하위 요소의 정확한 위치를 지정할 수 있습니다.

4. 고정:

상위 요소가 위치 속성을 고정으로 설정하면 하위 요소의 위치 지정이 브라우저 창을 기준으로 오프셋됩니다. 이 위치 지정 방법은 스크롤해도 변경되지 않으며 하위 요소는 항상 고정된 위치에 유지됩니다.

상위 요소에 position:fixed를 설정하는 일반적인 애플리케이션 시나리오는 탐색 모음이나 부동 상자와 같은 페이지에 고정 요소를 생성하기 위해 고정 위치 컨테이너를 생성하는 것입니다.

요약:

상위 요소의 위치 속성을 설정하는 목적은 하위 요소의 위치 및 레이아웃을 제어하는 ​​것입니다. 위치 속성을 상대, 절대 또는 고정으로 설정하여 상위 요소 또는 문서를 기준으로 하위 요소가 배치되는 방식을 변경할 수 있습니다. 이 위치 지정 방법은 하위 요소의 상대 위치 지정, 절대 위치 지정 또는 고정 위치 지정을 달성하여 보다 유연한 레이아웃 효과를 얻을 수 있습니다.

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