절대 위치와 상대 위치 이해: 너비, 높이 등

웹 페이지에서 위치 지정 요소를 다룰 때 개념 이해 절대 위치와 상대 위치의 차이가 중요합니다. 종종 의문이 제기되는 네 가지 핵심 사항을 살펴보겠습니다.

1. 상대 너비와 절대 너비

상대적으로 배치된 div는 자동으로 100% 너비를 차지하는 반면 절대 위치에 있는 div는 콘텐츠 너비만 사용하는 이유는 무엇입니까?

이유는 위치를 설정하기 때문입니다. :absolute는 문서 구조의 일반적인 흐름에서 요소를 제거합니다. 너비를 명시적으로 정의하지 않으면 브라우저는 절대 위치에 있는 div의 너비를 결정할 수 없습니다. 100% 너비를 달성하려면 명시적으로 width:100%를 설정합니다.

2. 높이 및 상대 위치

높이를 100%로 설정하면 상대적으로 배치된 div에는 아무런 영향이 없지만 절대 위치에 있는 div는 왜 100% 높이를 차지합니까?

위치가 있는 요소 :relative는 높이 측면에서 position:static 요소와 유사하게 동작합니다. 따라서 height:100% 설정은 상위 요소에 정의된 높이가 없으면 아무런 효과가 없습니다. 대조적으로, 절대 위치에 있는 요소는 문서 흐름에서 제거되고 포함된 요소의 높이를 기준으로 높이가 조정됩니다.

3. Margin-Top 및 이동

왜 margin-top:30px는 절대 위치의 div를 이동하지만 top:30px를 사용할 때 상대적으로 위치가 지정된 div만 이동합니까?

이것은 아마도 HTML 구조의 상위 요소와 관련됩니다. 전체 HTML 및 CSS 코드를 제공하지 않으면 정확한 원인을 파악하기 어렵습니다.

4. 상단 및 왼쪽이 없는 절대 위치

절대 위치에 있는 div에 대해 상단:0 및 왼쪽:0을 지정하지 않으면 왜 이전 div 위의 공간을 차지합니까?

상단 및 왼쪽 속성의 기본 설정은 자동입니다. 즉, 위치:절대값이 없는 경우 요소의 위치를 ​​기준으로 브라우저가 이러한 값을 자동으로 계산합니다. 결과적으로 절대 위치에 있는 div는 해당 위치를 명시적으로 정의하지 않고도 이전 div 위에 표시됩니다.