CSS 포지션(Position)

📍 Position

position 프로퍼티는 요소의 위치를 정의한다. top, bottom, left, right 프로퍼티와 함께 사용하여 위치를 지정한다.

엘리먼트의 위치를 정하는 속성 position 속성값 4가지

1. static(기본위치)

• 움직이지 않고 정적인 상태이다.

• static은 position 프로퍼티의 기본값으로, position 프로퍼티를 지정하지 않았을 때와 같다.

• 위에서 아래로, 왼쪽에서 오른쪽으로 순서에 따라 배치되며 부모 요소 내에 자식 요소로서 존재할 때는 부모 요소의 위치를 기준으로 배치된다.

• 좌표 프로퍼티를 같이 사용할 수 없으며 사용할 경우에는 무시된다.

좌표 프로퍼티 offset

• top
• right
• bottom
• left
  : 얼마만큼의 여백으로 위치될지 결정한다. position 속성이 있을 때만 적용되는 속성이다.

❗️ 주의할 점 )
: offset 속성들은 static에 영향을 주지 못한다!

2. relative (상대위치)

• 별도의 프로퍼티를 지정하지 않는 이상 static 과 동일하게 작동한다.

• static과 relative를 선언한 요소의 차이점은 좌표 프로퍼티의 동작 여부이며 그외는 동일하게 동작한다.

• 부모의 엘리먼트를 기준으로 상대적으로 움직인다.

• 기본 위치(static으로 지정되었을 때의 위치)를 기준으로 top, bottom, left, right를 사용하여 위치를 이동시킨다.

❗️ position 설정이 되어있지 않으면(Static 이라면) 적용되지 않는다. (요소 위치의 변화가 없다.)

3. absolute (절대위치)

• 부모 요소 또는 가장 가까이 있는 조상 요소(static 제외)를 기준으로 좌표 프로퍼티(top, bottom, left, right)만큼 이동한다.

• 즉, position 프로퍼티가 (relative, absolute, fixed)인 부모 또는 조상 요소를 기준으로 (없다면 웹페이지의 가장 가장자리 기준) 움직인다.

• 부모 요소의 배치 기준에 따라 움직이길 원한다면 부모 요소에 relative를 정의해야 한다.

• absolute 지정을 한 상태에서 left와 top 등의 값을 주지 않으면, 부모엘리먼트를 기준으로 원래 위치해야 할 위치가 기본값으로 (left와 top 등의 값으로) 지정된다.
  이때 left와 top을 0; 등의 특정 값으로 할당하면 비로소 html기준으로(혹은 static이 아닌 부모나 조상 기준으로) 위치가 바뀌게 된다. (참고로 '0' 으로 지정하면 px등의 단위를 안써도 된다. 🧐 )

📌 쉽게 말해 static이 아닌 부모가 나타날 때까지 무시하다가, static이 아닌 부모가 나타나면 그 부모의 위치를 기준으로 offset 값을 지정한다!

✍️ absolut 값을 갖게 되면, 내용의 크기만큼만 가로크기가 된다!
→ block요소라도 inline-element처럼 내용의 크기만큼만 너비가 생긴다는 것 🤔

✍️ 부모와의 링크가 끊긴 자식요소는 부모의 크기의 100%를 썼다가, 링크가 끊기게 되면서 크기를 지정할 수 없게 되어 자기 자신의 컨텐츠 크기만큼으로 바뀐다. 따라서 width와 height등의 설정을 통해 크기를 직접 지정해주어야 한다.

✍️ 반응형 헤더를 연습하면서 absolute를 사용해 보았는데, 엘리먼트를 기본적으로 브라우저 화면(viewport) 상에서 어디든지 원하는 위치에 자유롭게 배치시킬 수 있었다.
→ 이 속성과 offset을 함께 사용함으로써, 추후에 추가된 아이콘을 부모요소에 상관없이 원하는 위치에 위치시킬 수 있었다.

📌 relative(상대위치) & absolute(절대위치) 프로퍼티의 차이점

• relative
  : 기본 위치(static)를 기준으로 좌표 프로퍼티(top, bottom, left, right)을 사용하여 위치를 이동시키므로 부모를 기준으로 위치하게 된다.

• absolute
  : 부모에 static 이외의 position 프로퍼티가 지정되어 있을 경우에만 부모를 기준으로 위치하게 된다. 만일 부모, 조상이 모두 기본 위치(static)인 경우, 부모와의 관계가 끊기고 document body를 기준으로 위치하게 된다.

• 따라서 absolute 프로퍼티 요소는 부모 엘리먼트 내부에 속박되지 않고, 독립된 배치 문맥을 가지게 된다.

4. fixed (고정위치)

• 스크롤을 움직여도 화면에서 사라지지 않고 지정된 위치에 고정된다.

• 즉, fixed 는 특정한 엘리먼트를 원하는 화면 위치에 고정시켜서, 스크롤로부터 완전히 독립되게 만든다.

• 부모 요소와 관계없이 브라우저의 viewport를 기준으로 좌표프로퍼티(top, bottom, left, right)를 사용하여 위치를 고정시킨다.

• fixed 프로퍼티 선언 시, block 요소의 width는 inline 요소와 같이 content에 맞게 변화되므로 적절한 width를 지정하여야 한다.

• 즉, fixed 도 absolute 처럼 width와 height값을 지정하지 않으면, 부모와 연결되어있는 부피가 없기 때문에 자기 컨텐츠 만큼의 크기를 갖게된다.
  ( 또, 부모-자식 링크가 끊겼기 때문에, 부모엘리먼트의 크기는 자식 엘리먼트의 크기를 포함하지 않는다.)

✍️ fixed 를 통해서 하단 등에 고정된 UI 만들거나 할 때 사용할 수 있다. 😀 ▼

ex.)
background-color: black;
color: white;
position: fixed;
bottom: 0;
width: 100%;
text-align: center;

✍️ 정리하자면, static 기본, relative 는 상대적인 위치, absolute 는 절대적인 위치, fixed 는 스크롤과는 상관없이 화면에 고정한다.
absolute 과 fixed 는 부모와 링크가 끊기기 때문에 부피가 자신의 컨텐츠 크기와 같아지며 부모엘리먼트도 자식요소를 무시하게 되는 특징을 갖는다.

reference
poiemaWeb
Coding-everybody
position_offset
learn-layout