> For the complete documentation index, see [llms.txt](https://shhn0509.gitbook.io/html-and-css/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shhn0509.gitbook.io/html-and-css/css-2/undefined/positioning.md).

# 포지셔닝 레이아웃

## 포지셔닝(Positioning) 레이아웃

* 포지셔닝은 **웹브라우저가 렌더링하는 기본 레이아웃 흐름(Normal Layout Flow)을 재정의**하여 흥미로운 효과를 만들어 낼 때 사용한다. 
* 예를 들어 기본 레이아웃 흐름에서 레이아웃 내부 일부 요소의 위치를 조정하려면 포지셔닝을 사용하여 조정할 수 있다.
* 페이지의 다른 부분 위에 떠있는 UI 요소를 만들고 싶거나, 페이지의 스크롤과 상관없이 항상 브라우저 창의 동일한 위치에 자리한 UI요소를 만들고자 한다면 포지셔닝을 사용한다.  

## 포지셔닝 레이아웃 유형

### 정적(static) 위치 (기본 값)

문서의 흐름에 맞춰 배치

### 상대(relative) 위치

이전 요소에 자연스럽게 연결해 배치, 위치 조정 가능

* 자신의 위치를 기준으로 한 상대위치 값을 지정한다. (t r b l)
* `<float>` 요소와 다르게 자신의 원래 위치를 기억하고 그 위치를 기준으로 이동한다.
* `<position>`을 사용해서 요소가 부모 영역을 벗어나게 된다면 `<overflow: hidden>`을 사용해서 벗어난 영역을 감출 수 있다.

```css
.box-group {
  overflow: hidden;
}
```

```css
/* 상대(relative) 위치 설정 */
.box.is-blue {
  position: relative;
  top: 30px;
  right: -100px;
  z-index: 1;
}

.box.is-yellow {
  position: relative;
  top: -30px;
  left: 40px;
  z-index: 3;
}

.box.is-green {
  position: relative;
  bottom: 300px;
  left: 20px;
  z-index: 2;
}
```

### **절대(absolute) 위치**

원하는 위치 배정

* 스크롤을 내리면 사라짐
* 많이 사용되는 기술

#### 부모요소 안에서 위치를 조정하고 싶다면?

부모를 설정해준다, 자신을 포함하는 가장 가까운 부모 중에 포지션 값이 설정되어 있는(기본값인 `<static>`이 아닌 값)것을 부모로 인식을 한다.

#### `<absolute>`를 **자식요소**로 설정했을 때 &#x20;

주로 `<relative>`를 **부모요소**로 사용해준다. 만약 부모가 `<absolute>`라면 위치를 지정할 수 있게 된다. 원래 자신이 가지고 있던 공간을 아래요소가 인식을 못하기 때문에 아래요소는 위로 올라오려는 성질을 보여준다. 결국 레이아웃이 무너지는 형태가 나타난다.

```css
/* 절대(absolute) 위치 설정 */
.box.is-yellow {
  position: absolute;
  z-index: 10;
  top: 0;
  right: 0;
}

.box.is-green {
  position: absolute;
  top: 0;
  right: 0;
}

.box.is-blue {
  position: absolute;
  top: 0;
  right: 0;
}
.box-group {
  position: relative;
}
```

### \<relative>와 \<absolute>의 차이

* `<relative>`은 원래 박스가 가지고 있는 공간을 그대로 지키며 위치 이동을 했다면 `<absolute>`는 마치 `<float>`처럼 자신의 공간을 뒤에 나오는 요소로 하여금 인식하지 못하게끔 한다. 그리고 그 위치를 다른 요소가 차지하게 된다.

### \<float>와 \<absolute>의 차이

* `<float>`는 단순히 좌/우로만 이동한다면 `<absolute>` 페이지 내에서 자유롭게 배치 조정이 가능하다.

### 고정(fixed) 위치

지정한 위치에 고정

```css
[박스 안에 스크롤이 생기게 된다.] .box-group {
  overflow: auto;
}

/* 스크롤 길이 */
.box-wrapper {
  height: 1600px;
}
```

### \<absolute>와 \<fixed>의 차이

* `<absolute>`는 부모를 찾는다 그리고 부모 내에서 위치를 조정 할 수 있다. 만약 자신을 포함 하는 가장 가까운 부모들이 모두 포지션 값을 갖고 있지 않는다면(모두 `<static>`값을 가진다면) 자신의 최종 부모는 뷰포트가 된다.
* `<fixed>`는 부모를 찾지 않고 무조건 사용자가 보는 화면단(뷰포트)를 기준점으로 고정이 가능해진다.

```css
.box.is-yellow {
  position: absolute;
  z-index: 10;
  top: 0;
  right: 0;
}

* 위의 절대 위치에 있던 yellow 박스를 fixed로 속성을 덮어쓰려고 한다. 
/* 고정(fixed) 위치 설정 */
.box.is-yellow {
  position: fixed;
  top: initial;
  left: 0;
  bottom: 0;
}
* 절대 위치 설정의 top값이 0으로 설정되어 있어서 bottom 속성이 적용이 안됐었다. 
그럴땐 Initial을 적용해서 top속성을 초기화 시킨다.
```

### 달라붙는(sticky) 위치

뷰포트에서 설정한 위치에 왔을 때 그 위치에 달라붙게 된다.&#x20;

{% hint style="info" %}
인터넷 익스플로어 미지원.(단, 자바스크립트를 사용해서 9이상의 버전에서 지원 가능)
{% endhint %}

```css
/* 달라붙는(sticky) 위치 설정 */
.box-group .box {
  position: sticky;
  outline: 3px solid red;
  top: 0;
  margin-bottom: 100px;
}
```

* static 속성을 제외한 나머지는 좌표를 이용하여 위치를 조절할 수 있다.

## \<z-index>

* 요소들의 수직 위치를 조정. 값은 정수이다. 숫자가 클 수록 위로 올라오고 숫자가 작을 수록 아래로 내려간다.
* 만약 각각 다른 요소들에 z-index값을 같게 했을 때, 코드 상 나중에 입력한 것일 수록 위로 올라온다.
* 값을 10, 100단위로 설정해야 작업을 수월하게 할 수 있음
* [z-index 블로그 글 참고](https://www.codingfactory.net/10878) &#x20;

## 참고&#x20;

* [CSS 레이아웃](https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout)
* [CSS 레이아웃을 배웁시다 - position](http://ko.learnlayout.com/position.html)
* [CSS 레이아웃을 배웁시다 - position 예제](http://ko.learnlayout.com/position-example.html)

{% file src="/files/-MRTkw5xJDOMvdlmZDP8" %}