CSS에서 정적 (기본) 위치 지정과 상대 위치 지정의 차이점은 무엇입니까?
정적 위치와 상대 위치의 차이점
답변:
정적 위치 지정은 요소의 기본 위치 지정 모델입니다. 일반 HTML 흐름의 일부로 렌더링 된 페이지에 표시됩니다. 정적 위치 요소는 순종하지 않는 left, top, right및 bottom규칙 :
상대 위치는 특정 오프셋 (지정할 수 있습니다 left, topHTML 흐름에서 요소의 정상 위치에 상대적입니다 등). 따라서 내부에 텍스트 상자가있는 경우 텍스트 상자에 div상대 위치를 적용하여 일반적으로 내부에 배치 될 위치를 기준으로 특정 위치에 표시되도록 할 수 있습니다 div.
또한 절대 위치 지정이 있습니다. 즉, 전체 문서를 기준으로 요소의 정확한 위치를 지정 하거나 상대적으로 위치하는 다음 요소를 요소 트리에서 더 위쪽에 지정합니다 .
그리고 a position: relative가 계층 구조의 부모 요소에 적용될 때 :
절대 위치 요소가 상대적으로 위치 된 요소에 의해 어떻게 묶여 있는지 확인하십시오.
그리고 마지막으로 수정되었습니다. 고정 위치는 요소를 뷰포트의 특정 위치로 제한하여 스크롤하는 동안 제자리에 유지됩니다.
고정 위치 요소가 뷰포트에 의해 바인딩 된 것으로 간주되지 않기 때문에 스크롤을 일으키지 않는 동작을 관찰 할 수도 있습니다.
절대적으로 배치 된 요소는 여전히 뷰포트에 의해 바인딩되며 스크롤을 유발합니다.
.. 물론 부모 요소가 overflow: ?스크롤 동작을 결정하는 데 사용 하지 않는 한 (있는 경우).
절대 위치 및 고정 위치를 사용하면 요소가 HTML 흐름에서 제거됩니다.
좋은 대답이지만 (상대 위치의 경우) 요소의 정상적인 위치를 기반으로 한 오프셋이 아닙니까?
—
Baztoune
나는 Baztoune의 의견에 동의합니다. 상대적으로 배치 된 요소에 대한이 정의는 잘못된 것입니다.
—
Ryan Williams
static와 relative요소는 당신이 위치를 변경할 수 있습니다 후자를 제외하고 동일 원래 위치를 기준으로 하지 포함하는 요소에, - 어디 그 absolute온다 또한, 모든 요소가 아닌 다른 값을 사용하여 위치처럼. static당신이 사용할 수 있습니다 z-index.
이 답변을 재 작업하여 상대적 위치를 더 정확하게 정의하고 이미지를 포함하여 다양한 위치 유형을 보여줍니다.
—
마태 복음 애보트
CSS가 기본적으로
—
cram2208
position: static;대체하는 대신 왜 여전히 구현되는지 궁금합니다 position: relative;. 하나가 아닌 다른 위치 항목을 원하지 않는 경우 top: 0;와 left: 0;다음의가, 바로 그것을 할 수 있습니다? position: static;CSS의 일부로 여전히 필요한 근본적인 이유 가 있습니까?
@ cram2208은 상대적으로 자식 절대 위치 노드가 그들에 상대적으로 위치하도록 만들기 때문에, 정적은 절대 위치 자식이 그들의 위치를 무시하고 가장 가까운 상대적 위치 요소에 상대적으로 위치하도록 허용합니다. 가지고 있어야 할 중요한 개념
—
Felype
여기에서 간단한 개요를 볼 수 있습니다 : W3School
또한 내가 올바르게 기억하면 상대 요소를 선언 할 때 기본적으로 그렇지 않으면 동일한 위치에 유지되지만이 요소에 대해 상대적으로 요소를 절대적으로 배치 할 수있는 능력을 얻게되는데, 이는 매우 유용하다는 것을 알게되었습니다. 과거에.
w3schools ... 나는 이것을 찬성하지 않을 것이지만 당신은 수치심을 가지고 살아야합니다.
—
Myles Gray
한편 2017 년에 W3Schools는 예전만큼 나쁘지는 않습니다 (아직 완벽하지는 않지만 커뮤니티 반발을 진지하게 받아들이고 실제로 개선되었습니다).
—
Priidu Neemre
한편, 2018 년에 W3Schools는 여전히 예전만큼 나쁘지는 않지만 오늘날에도 여전히 명성이 다른 개발자들에게 위의 첫 번째 댓글을 언급하면서 고전적인 웃음을 얻는다는 점을 안타깝게 생각합니다. 내 하루에 ... W3School .... 첫인상 hey ...
—
redfox05
"CSS가 여전히 position : static;을 구현하는 이유"에 대한 대답 한 장면에서 부모에 대해서는 position : relative를 사용하고 자식에 대해서는 position : absolute를 사용하여 자식의 크기 조정 폭을 제한합니다. 링크의 '열'을 가질 수있는 수평 메뉴 시스템에서 'width : auto'를 사용하는 것은 상대적인 부모와 함께 작동하지 않습니다. 이 경우 '정적'으로 변경하면 너비가 내용에 따라 달라질 수 있습니다.
컨테이너에 포함 된 콘텐츠의 양에 따라 컨테이너를 조정할 수없는 이유를 궁금해하는 데 몇 시간을 보냈습니다. 도움이 되었기를 바랍니다!
이것이 답입니다! 모두가 상대 위치에 대해서만 전문가에게 말하고 다음과 같은 질문에서 요점을 놓치고 있습니다. 차이점은 무엇입니까?
—
Bartis Áron
상대 위치는 정상적인 흐름을 기준으로합니다. 해당 요소 (오프셋 포함)의 상대 위치는 해당 요소가 이동하지 않았 으면 정상적으로 있었던 위치를 기준으로합니다.
Matthew Abbott 는 정말 좋은 대답을했습니다.
절대 및 상대 위치 지정된 항목은 순종 top, left, right그리고 bottom정적 위치 항목을하지 않는 명령 (오프셋).
상대적으로 배치 된 항목은 일반적으로 html에있는 위치에서 오프셋을 이동합니다.
절대 위치 항목은 문서 또는 상대적으로 위치 된 다음 요소에서 DOM 트리 위로 오프셋을 이동합니다.
static 및 relative는 위치 속성입니다 .relative는 많은 용도로 사용됩니다. 하나가 아닙니다. 그러나 정적 및 상대는 Html의 정상적인 문서 흐름에 해를 끼치 지 않습니다. static은 Html에 요소를 쓸 때 기본 위치입니다. 요소에 상대 위치가있는 경우 해당 요소는 원래 위치를 기준으로 배치 될 수 있습니다. 작은 공간에서 요소를 조정하려는 경우 요소에 상대적 위치가 있고 자식 요소가있는 경우 여백, 패딩 등을 추가 할 필요가 없도록 상대적 위치를 사용합니다. 여기서 우리는 부모에 대해 상대적으로 측정을 할 수 있습니다. 자식에 너비 10 %를 추가하면 (너비 + 패딩) x10 %를 의미하지만 상대 키워드를 추가하지 않으면 너비 x10 %가됩니다. 그 외에 친척의 가장 중요한 사용법은 다음과 같습니다. 그 위에 모든 요소를 배치 할 수 있습니다.
position: relative하고 절대 입력 하지 않는다는 것 입니다.position: static:)