포지셔닝은 어떻게 작동합니까?

포지셔닝은 요소를 장소로 제어하는 ​​데 도움이 됩니다.

다음은 다양한 유형의 포지셔닝입니다.

  position: static; /* default */
  position: relative;
  position: absolute;
  position: sticky;
  position: fixed;
  position: inherit;

위치: 정적

모든 상황에서 기본 위치. 항상 일반 페이지에 따라 배치됩니다.

Will it change if I position the element on top, right, bottom or left?

NO , it will become stated if you can position the element.

위치: 친척

정상 위치를 기준으로 배치된 A. 그것은 우리가 결정한 모든 위치에서 지시할 수 있습니다.
위치에 값을 선언하지 않으면 정적 위치인 것처럼 작동합니다.
위쪽, 오른쪽, 아래쪽 및 왼쪽 위치를 사용하여 모든 요소를 ​​밀 수 있습니다.

위치: 절대

문서 흐름에서 요소를 제거할 수 있는 위치와 컨테이너를 참조하여 위치를 지정할 수 있으며 컨테이너에도 지정된 위치가 있어야 합니다.
컨테이너 요소에는 상대 위치가 있는데 왜 브라우저 중앙에 있는지 궁금합니다.
둘 다 Absolute에 위치했기 때문에 텍스트가 이미지와 겹칩니다.

포지션: 스티키

Sticky positioning is a hybrid of relative and fixed positioning. The element is treated as relative positioned until it crosses a specified threshold, at which point it is treated as fixed positioned. - Mozilla Foundation, MDN Web docs

아이콘(하위) 및 내비게이션(하위)이 고정 위치로 설정된 탐색 모음 컨테이너(상위)

브라우저를 스크롤하면 끈끈한 컨테이너가 흐르면서 계속 나타납니다.

코드 초기에 요소의 패딩이 자동으로 설정되지 않습니다.
다음을 선언해야 합니다.

   nav-bar { 
      /* using vendor-prefixed (-webkit and -moz) for specific browser */
              position: -webkit-sticky;    /* for chrome browser */
              position: -moz-sticky;       /* for mozilla browser */
              position: sticky;
              top: 0;
              overflow: hidden;    /* to fix the height of the container */ 
   }

오버플로 속성을 선언했습니다.

Q: 왜 작동하지 않습니까?

A: 귀하의 브라우저는 지원되지 않습니다.

확인 부탁드립니다caniuse

위치: 고정

절대 위치와 마찬가지로 위치가 고정된 요소는 문서 흐름에서 제외됩니다. 주요 차이점은 위치가 고정된 요소는 항상 브라우저 창을 기준으로 배치된다는 것입니다.

단락 요소를 컨테이너로 제거한 결과 컨테이너(부모)와 이미지(자식)가 단락과 겹칩니다.

다른 속성은 어떻습니까?

상위에서 동일한 값을 가진 위치를 상속합니다.

   parent-element { padding: 15px; }
   child-element { padding: inherit; }

위쪽, 오른쪽, 아래쪽 및 왼쪽 모든 요소를 ​​설정된 위치에 배치할 수 있는 권한을 부여합니다. 상대, 절대 및 고정.

(-) 속성에 대한 음수 값이 허용됩니다.

z-index 속성은 겹치는 요소의 세로 쌓임 순서를 조작합니다.



내가 사용한 응용 프로그램:
Balsamiq
헤더 이미지
Udemy Master Class Header
고정 위치에 대한 참조
Mozilla Foundation
브라우저 호환성을 위한 브라우저 도구
caniuse