CSS 위치 속성 값 간의 차이

내가 처음으로 CSS를 배우기 시작했을 때, 나는 position 속성의 모든 값이 무엇을 했는지, 그리고 relative, absolute, fixed과 sticky을 언제 사용했는지 정말 곤혹스러웠다.이것은 내가 가치관에 대한 총결이다.

위치: 정적;

position 속성의 기본값은 static입니다.요소는 HTML에서 작성한 컨텐트의 순서(문서 흐름)에 따라 표시됩니다.

위치: 상대;

relative 값은 static 값과 매우 비슷하지만 요소가 정상적인 위치에 비해 위치를 변경할 수 있습니다.그게 무슨 뜻이에요?이것은 속성 left, right, top 및 bottom을 사용할 수 있음을 의미합니다.

위의 그림에서 child-one이 left: 20px 속성을 가지고 있어도 요소는 20px를 왼쪽으로 이동하지 않습니다.position: static개가 있기 때문이다.child-twoposition: relative은 정적 위치를 기준으로 왼쪽과 맨 위로 이동합니다.하지만 현재 child-two은 child-three을 덮어쓰고 있다.왜?속성 left, right, top 및 bottom을 사용하면 문서를 삭제하고 다른 요소는 문서 흐름에 유지됩니다.따라서 left 원소에 right, top, bottom과 position: relative을 사용하는 경우는 드물다. 왜냐하면 position: relative 원소 주위에 원소 스타일을 설정하기 어렵기 때문이다.

위치: 절대;

absolute 값은 이 요소를 문서 흐름에서 완전히 삭제하고 다른 요소가 absolute 요소로 나타날 때 존재하지 않습니다.다음 그림에서 child-one이 다른 요소 위에서 어떻게 부동하는지 확인하십시오.

요소를 주위에서 이동하지 않고 특정 위치에 배치하려는 경우 유용합니다.left, right, top, bottom을 position: absolute과 함께 사용할 수 있습니다.absolute 값은 요소를 참조할 수 있는 부모 요소에 배치합니다.요소는 position: static의 부모 요소를 참조할 수 없습니다.요소는 position 값이 relative, absolute, fixed 또는 sticky인 요소에만 절대적으로 위치할 수 있습니다.요소를 절대적으로 배치할 수 있는 부모 요소가 없으면 브라우저 창(HTML 요소)을 기준으로 배치됩니다.

위 그림에서 child-one은 parent 요소 위에 위치하고 브라우저 창의 맨 위에서 0px입니다.이것은 parent 요소가 아니라 브라우저 창을 부모 용기로 인용하기 때문입니다. parent은 position: static을 가지고 있기 때문입니다.
그러나 grandchild-one은 child-three을 인용한다. position: relative이 아니라 static이 인용되기 때문이다.grandchild-one은 child-three 소자 상단의 10px입니다.relative을 사용하여 absolute 요소를 포지셔닝하는 것은 position: relative의 가장 흔히 볼 수 있는 용도 중의 하나이다.absolute 요소에 비해 relative 요소가 있으면 absolute 요소가 인용 이전의 relative 요소(또는 static 이외의 값이 있는 요소)로 되돌아가거나 브라우저 창으로 되돌아오는 것을 방지할 수 있습니다.

위치: 고정

fixed 요소는 브라우저 창을 기준으로 배치됩니다.아버지 원소는 중요하지 않다.예를 들어,

.child-one {
  position: fixed;
  top: 0;
}

child-one 요소는 아래로 스크롤해도 페이지 상단에 유지됩니다.고정 요소는 스크롤 막대와 함께 이동하여 페이지에서 완전히 같은 위치를 유지합니다.position: fixed은 페이지 상단에 붙어 있는 내비게이션 표시줄을 만드는 데 사용할 수 있습니다.

위치: 점성

sticky값은 relative과 fixed값의 조합과 유사하다.기본적으로 요소는 relative이며 요소가 있는 위치로 스크롤된 후 fixed이 될 때까지 상대적인 상태를 유지합니다.top 속성을 사용하여 페이지 상단에 요소를 붙여넣습니다.

예:

스크롤 전:

요소를 스크롤한 후: child-two 요소가 브라우저 창의 맨 위에 fixed px로 표시됩니다.

참조된 리소스:
CSS position Property
읽어주셔서 감사합니다!:)