[CSS][Layout][Positioned Layout][Relative Positioning]

모든 요소의 기본 포지션은 static(initial)이며, Flow Layout을 따른다.

.box {
  /* Revert to its default value, which is ‘static’ */
  position: initial;
}

플로우 레이아웃은 기본적으로 모든 요소들을 겹치지 않게 배치하나, 기존 위치에서 벗어나면 겹칠 수 있다.

Positioned Layout을 사용하지 않는 레이아웃들은 정적 레이아웃이라 한다.(플렉스박스, 플로우, 그리드)

Positiond Layout는 요소들을 겹치게 하기 위해 존재한다.

제목이 곧 내용이다.

Relative Positioning

.some-box {
  position: relative;
}

해당 클래스가 적용된 요소는 다음과 같은 기능을 한다.

• 자식들을 자신의 쌓임 맥락에 포함한다.
  • 이는 다른 position 설정들과 함께 알아본다.
• 새로운 CSS 프로퍼티들을 허용한다
• 아래 프로퍼티들을 통해 원래 있을 위치로부터 이동한다. 
  • top
  • left
  • right
  • bottom

Flow Layout을 따랐으면 존재할 기존 위치에서 이동한다.

left:-10px는 right:10px와 동일하다.

마진으로도 위치를 바꿀 수 있지 않나요?

해당 방법을 사용하면 레이아웃에 영향을 미치지 않는다.

브라우저는 해당 요소가 원래 위치에 있는 것처럼 레이아웃을 구성한다.

마진을 사용하면 위 요소가 아래 요소들의 레이아웃에 영향을 미침

부모 안의 마진을 변경하면, 마진에 의해 content 너비가 변경된다. relative는 너비는 그대로이고 우측으로 이동한다.

Relative Positioning은 인라인에도 적용 가능하다.

위와 같이 인라인 요소에도 적용 가능하다.