정적 위치 지정과 상대 위치 지정의 차이점

Question

CSS에서 정적(기본) 위치 지정과 상대 위치 지정의 차이점은 무엇인가요?

Answer 1

"CSS가 여전히 position:static;을 구현하는 이유"에 대한 답변의 경우, 경우에 따라 상위 요소에 position:relative를 사용하고 하위 요소에 position:absolute를 사용하면 하위 요소의 크기 조절 너비가 제한됩니다. 수평 메뉴 시스템에서는 '열'을 연결했을 수 있는데, width:auto를 사용하면 상대 상위 요소에서는 작동하지 않습니다. 이 경우 '정적'으로 변경하면 그 안의 콘텐츠에 따라 너비가 변경됩니다.

컨테이너의 내용을 기준으로 크기를 조정할 수 없는 이유 때문에 몇 시간 동안 고민했습니다. 도움이 되었기를 바랍니다!

Answer 2

정적 위치 지정은 요소의 기본 위치 지정 모델입니다. 이는 일반 HTML 흐름의 일부로 페이지에 렌더링됩니다. 정적 위치 요소는 left、top、right和bottom 규칙을 따르지 않습니다.

상대 위치 지정을 사용하면 HTML 흐름에서 요소의 일반 위치를 기준으로 특정 오프셋을 지정할 수 있습니다(예: left、top等）。因此，如果我在一个div中有一个文本框，我可以在文本框上应用相对定位，以便它显示在相对于它在div일반적으로 배치되는 특정 위치:

절대 위치 지정도 있습니다. 전체 문서를 기준으로 요소의 정확한 위치를 지정하거나 또는 요소 트리의 상위에 있는 상대적으로 배치된 다음 요소를 기준으로 를 지정할 수 있습니다.

position: relative가 계층 구조의 상위 요소에 적용되는 경우:

절대적으로 배치된 요소는 상대적으로 배치된 요소의 제한을 받습니다.

마지막으로 고정된 위치가 있습니다. 고정 위치 지정은 요소를 스크롤하는 동안 변경되지 않은 뷰포트의 특정 위치로 제한합니다.

고정 위치 요소는 뷰포트 경계 요소로 간주되지 않으므로 스크롤을 유발하지 않는다는 점도 확인할 수 있습니다.

절대적으로 배치된 요소는 여전히 뷰포트에 의해 제한되어 스크롤을 유발합니다.

물론 부모 요소가 overflow: ?를 사용하여 스크롤 동작을 결정하지 않는 한(있는 경우)

절대 위치 지정과 고정 위치 지정을 사용하면 요소가 HTML 흐름에서 벗어날 수 있습니다.