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