CSS에서 정적 (기본) 위치 지정과 상대 위치 지정의 차이점은 무엇입니까?
답변
정적 위치 지정은 요소의 기본 위치 지정 모델입니다. 일반 HTML 흐름의 일부로 렌더링 된 페이지에 표시됩니다. 정적 위치 요소는 순종하지 않는 left, top, right및 bottom규칙 :
상대 위치는 특정 오프셋 (지정할 수 있습니다 left, topHTML 흐름에서 요소의 정상 위치에 상대적입니다 등). 따라서 내부에 텍스트 상자가있는 경우 텍스트 상자에 div상대 위치를 적용하여 일반적으로 내부에 배치 될 위치를 기준으로 특정 위치에 표시되도록 할 수 있습니다 div.
또한 절대 위치 지정이 있습니다. 즉, 전체 문서를 기준으로 요소의 정확한 위치를 지정 하거나 상대적으로 위치하는 다음 요소를 요소 트리에서 더 위쪽에 지정합니다 .
그리고 a position: relative가 계층 구조의 부모 요소에 적용될 때 :
절대 위치 요소가 상대적으로 위치 된 요소에 의해 어떻게 묶여 있는지 확인하십시오.
그리고 마지막으로 수정되었습니다. 고정 위치는 요소를 뷰포트의 특정 위치로 제한하여 스크롤하는 동안 제자리에 유지됩니다.
고정 위치 요소가 뷰포트에 의해 바인딩 된 것으로 간주되지 않기 때문에 스크롤을 일으키지 않는 동작을 관찰 할 수도 있습니다.
절대적으로 배치 된 요소는 여전히 뷰포트에 의해 바인딩되며 스크롤을 유발합니다.
.. 물론 부모 요소가 overflow: ?스크롤 동작을 결정하는 데 사용 하지 않는 한 (있는 경우).
절대 위치 및 고정 위치를 사용하면 요소가 HTML 흐름에서 제거됩니다.
답변
여기에서 간단한 개요를 볼 수 있습니다 : W3School
또한 내가 올바르게 기억하면 상대 요소를 선언 할 때 기본적으로 그렇지 않으면 동일한 위치에 유지되지만이 요소에 대해 상대적으로 요소를 절대적으로 배치 할 수있는 능력을 얻게되는데, 이는 매우 유용하다는 것을 알게되었습니다. 과거에.
답변
“CSS가 여전히 position : static;을 구현하는 이유”에 대한 대답 한 장면에서 부모에 대해서는 position : relative를 사용하고 자식에 대해서는 position : absolute를 사용하여 자식의 크기 조정 폭을 제한합니다. 링크의 ‘열’을 가질 수있는 수평 메뉴 시스템에서 ‘width : auto’를 사용하는 것은 상대적인 부모와 함께 작동하지 않습니다. 이 경우 ‘정적’으로 변경하면 너비가 내용에 따라 달라질 수 있습니다.
컨테이너에 포함 된 콘텐츠의 양에 따라 컨테이너를 조정할 수없는 이유를 궁금해하는 데 몇 시간을 보냈습니다. 도움이 되었기를 바랍니다!
답변
위치 상대를 사용하면 위치를 지정하는 데 위쪽 / 아래쪽 / 왼쪽 / 오른쪽을 사용할 수 있습니다. 마진 매개 변수를 사용하지 않는 한 Static은 이것을 허용하지 않습니다. Top과 margin-top에는 차이가 있습니다.
기본값이므로 정적을 많이 사용할 필요가 없습니다.
답변
상대 위치는 정상적인 흐름을 기준으로합니다. 해당 요소 (오프셋 포함)의 상대 위치는 해당 요소가 이동하지 않았 으면 정상적으로 있었던 위치를 기준으로합니다.
답변
Matthew Abbott 는 정말 좋은 대답을했습니다.
절대 및 상대 위치 지정된 항목은 순종 top, left, right그리고 bottom정적 위치 항목을하지 않는 명령 (오프셋).
상대적으로 배치 된 항목은 일반적으로 html에있는 위치에서 오프셋을 이동합니다.
절대 위치 항목은 문서 또는 상대적으로 위치 된 다음 요소에서 DOM 트리 위로 오프셋을 이동합니다.
답변
Static : STATIC 위치 요소는 DEFAULT (객체의 일반적인 위치 지정)에 의해 얻은 것입니다.
Relative : 현재 위치를 기준으로하지만 이동할 수 있습니다. 또는 RELATIVE 위치 요소가 ITSELF에 상대적으로 위치합니다.
