[CSS] position

MDN 공식문서

- position(링크)

 

설명

The position CSS property sets how an element is positioned in a document.

CSS에서 position 속성은 요소가 문서(html)에서 어떻게 위치되는지를 결정한다.

The top, right, bottom, and left properties determine the final location of positioned elements.

위, 오른쪽, 아래, 왼쪽 속성은 position 속성이 적용된 최종 위치를 결정한다.

 

W3Schools 문서

- position(링크)

 

설명

The position property specifies the type of positioning method used for an element (static, relative, fixed, absolute or sticky).

position 속성은 요소에 적용되는 다양한 방법의 유형이 있다.

- static

- relative

- fixed

- absolute

- relative

 

총 다섯 가지이다.

 

Elements are then positioned using the top, bottom, left, and right properties. 

요소들은 top, bottom, left, right 속성을 사용해서 위치하게 된다.

However, these properties will not work unless the position property is set first. 

하지만 이러한 속성들은 우선 position 속성 자체가 설정되지 않으면 동작하지 않는다.

They also work differently depending on the position value.

그리고 top, bottom, left, right 속성은 position 속성이 어떻게 설정되었는지에 따라 다르게 동작한다.

 

Static

HTML elements are positioned static by default.
기본적으로 HTML 요소들은 모두 static 으로 position 되어있다.
Static positioned elements are not affected by the top, bottom, left, and right properties.
static으로 설정된 요소들은 top, bottom, left, right 속성들에 영향을 받지 않는다.
An element with position: static; is not positioned in any special way; it is always positioned according to the normal flow of the page.

특별한 방식으로 position 되지 않고, 항상 일반적인 페이지의 플로우에 따라서 position 된다.

 

Relative

An element with position: relative; is positioned relative to its normal position.
relative position 의 요소는 일반적인 position을 기준으로 위치한다.
Setting the top, right, bottom, and left properties of a relatively positioned element will cause it to be adjusted away from its normal position.

top, right, bottom, left 속성은 일반적인 위치를 기준으로 움직이게 한다.

Other content will not be adjusted to fit into any gap left by the element.

다른 내용들은 영향을 받지 않는다.

 

Fixed

An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. 

fixed position 의 요소는 viewport 기준이다. 페이지가 스크롤되어도,(=viewport는 그대로이기 때문) 항상 같은 자리에 있다.

The top, right, bottom, and left properties are used to position the element.
top, right, bottom, left 속성은 그 요소의 위치를 정하기 위해서 사용된다.
A fixed element does not leave a gap in the page where it would normally have been located.

 

Absolute

An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).

absolute position의 요소는 가장 가까운 + position 속성이 적용된 부모 요소를 기준으로 위치된다.
However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.
하지만, 만약 position 속성이 적용된 부모가 없다면, body를 기준으로 움직이며 페이지 스크롤이 되면 따라 움직인다.
Note: Absolute positioned elements are removed from the normal flow, and can overlap elements.

중요 : absolute 가 적용된 요소들은 일반적인 플로우에서 벗어나 있기 때문에, 기존의 요소들과 중첩되어 보일 수 있다.

 

Sticky

An element with position: sticky; is positioned based on the user's scroll position.
sticky position 요소는 사용자의 스크롤 position 을 기준으로 위치하게 된다.
A sticky element toggles between relative and fixed, depending on the scroll position. 

relative 와 fixed 사이에서 움직이고, scroll position 에 따라 다르다.

It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed).

viewport 에서 특정 위치에 도달할 때까지는 relative 로 위치된다. 그리고 나서는 fixed 랑 똑같이 특정 위치에 stick(붙는다).

div.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  background-color: green;
  border: 2px solid #4CAF50;
}

• safari의 경우에는 -webkit-sticky를 사용해주어야 한다.

정리

• 각 항목들의 예시는 위 첨부된 문서의 링크에서 더 상세히 볼 수 있다.
• position 속성은 워드나 한글 파일에서 이미지를 넣을 때, 어떤 방식으로 삽입할 것인가 요런 느낌이랑 비슷하다.
• top, bottom, left, right 속성은 먼저 position 속성이 적용된 요소에 한해 적용된다.
• static 은 웹페이지에서 default 값(=normal flow)이다. 이 경우에는, position 속성이 적용되나 마나이다. 그래서 top, bottom, left, right 속성이 안 먹힌다.
• relative 는 webpage 의 normal flow 를 기준으로 위치한다.
• fixed 는 viewport 기준이기 때문에, 스크롤과 상관없이 고정된 장소에 위치한다.
• absolute 는 position 속성이 적용된 가장 가까운 부모요소를 기준으로 위치한다.
• sticky는 특정 지점까지는 relative 와 같고, 스크롤해서 특정 지점을 지나면 fixed 처럼 움직인다. 따라서 scroll position 이 중요하다.