> For the complete documentation index, see [llms.txt](https://docs.sysout.co.kr/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.sysout.co.kr/web/develop-page/css/attributes/area/position.md).

# position

## position 속성

`position` 속성을 통해 문서 상에 요소를 배치하는 방법을 설정한다. 다음과 같은 값을 줄 수 있다.

* static - 기본값. 일반적인 순서에 의한 배치 설정
* relative - 일반적인 순서에 의해 배치하지만 위치 조정이 가능하도록 설정
* absolute - 일반적인 순서에 의해서 배치되지 않고 가장 가까운 position이 설정된 영역을 기준으로 배치 설정
* fixed - 일반적인 순서에 의해서 배치되지 않고 화면으로 기준으로 배치 설정
* sticky - 일반적인 순서에 의해서 배치하지만 스크롤 이동 시 지정된 위치에 부착되도록 배치 설

그리고 position과 함께 사용할 수 있는 세부 속성들은 다음과 같다.

* top - 상단으로부터의 간격(offset)
* bottom - 하단으로부터의 간격(offset)
* left - 좌측으로부터의 간격(offset)
* right - 우측으로부터의 간격(offset)
* z-index - position이 설정된 영역 간의 z축 순서

### static

`position:static;`  설정 영역은 일반적인 순서에 의해서 위치가 정해진다. 일반적인 순서라 함은 먼저 작성된 영역이 먼저 자리를 잡고, 나중에 작성된 영역은 이후에 배치되는 것을 말한다.

{% embed url="<https://codepen.io/hiphop5782/pen/PoKEwxw>" %}

### relative

`position:relative;` 설정 영역은 `position:static;` 과 동일한 배치가 이루어진다. 다른 점은 배치된 위치에서 `top`, `left`, `right`, `bottom` 등을 통해 간격을 설정할 수 있고, `z-index` 설정으로 겹치는 영역에 대한 표시 순서를 설정할 수 있다는 것이다.

{% embed url="<https://codepen.io/hiphop5782/pen/OJjzPrV>" %}

### absolute

`position:absolute;` 설정 영역은 `static`, `relative` 등과 다르게 일반적인 순서 배치가 적용되지 않는다. 가장 가까운 `position` 설정 영역을 기준으로 배치를 계산한다. 가장 가까운 `position` 설정 영역이 없을 경우 문서를 기준으로 배치한다.

{% hint style="info" %}
가장 가까운 `position` 설정 영역이란 `static`을 제외한 `relative`, `absolute`, `fixed`, `sticky`를 설정한 영역을 말한다.
{% endhint %}

{% embed url="<https://codepen.io/hiphop5782/pen/wvqpBOG>" %}

### fixed

`position:fixed;` 설정 영역은 `static`, `relative` 등과 다르게 일반적인 순서 배치가 적용되지 않는다. Viewport(뷰포트)를 기준으로 배치를 계산한다. 스크롤을 통한 화면 이동이 발생해도 해당 위치에 고정되어 있다.

{% hint style="info" %}
Viewport는 문서가 표시되는 화면의 영역을 말한다. 브라우저(Browser)의 메뉴, 테두리 등을 제외한 문서 표시 영역이라고 볼 수 있다.
{% endhint %}

{% embed url="<https://codepen.io/hiphop5782/pen/WNEdvrj>" %}

{% embed url="<https://youtu.be/hGohbq0aJtc>" %}

### sticky

`position:sticky;` 설정 영역은 `static`과 동일하게 위치가 정해진다. 스크롤을 통한 화면 이동이 발생하여 해당 위치를 벗어나는 경우 가장 가까운 `position`이 설정된 영역 내에서 `fixed`와 동일하게 처리된다.

{% embed url="<https://codepen.io/hiphop5782/pen/XWaVbXB>" %}

{% hint style="info" %}
sticky의 경우 지원하지 않는 브라우저가 많이 있으니 사용 시 주의해야 한다.

지원하지 않는 브라우저를 고려해야 할 경우 Javascript 등을 활용하여 프로그래밍 처리로 구현한다.

<https://caniuse.com/css-sticky>
{% endhint %}

### 중앙 배치

{% embed url="<https://youtu.be/L1VWc1VdyN8>" %}

`position`을 활용하여 <mark style="color:red;">화면 중앙</mark>에 영역을 배치할 수 있다. `top`, `left` 또는 `right`, `bottom`을 각각 50%씩 부여하고 `margin`이나 `transform` 등으로 세부 위치를 조정하는 형태이다.

{% embed url="<https://codepen.io/hiphop5782/pen/ExvojyO>" %}

### z-index

`z-index` 속성은 `position:static;` 을 제외한 `position`이 설정된 영역에서 z축 배치를 설정한다.

{% embed url="<https://codepen.io/hiphop5782/pen/dyzJoJP>" %}

{% hint style="info" %}
`z-index`는 건물 층계로 이해할 수 있다.

* `z-index : 1;` - 1층에 배치
* `z-index : 2;` - 2층에 배치
* `z-index : -1;` - 지하 1층에 배치

하늘에서 건물을 내려다보면 높은 층부터 보이며, z-index에 따른 표시 방식도 동일하다.
{% endhint %}