[CSS] Position의 속성(static, relative, absolute, fixed, sticky)

position

html 문서에서 각 요소를 배치하는 방법을 설정하는 속성

어떤 방식으로 배치할 것이지를 결정하고, top, right, vottom, left 의 값으로 위치를 설정한다.

default 값은 static

 

position: static | relative |  absolute | fixed | sticky ;

 

1. position: static;

html 문서 상에서 html 이 작성된 순서 그대로 원래 있어야 할 자기 자리에 위치한다.

그래서 top, right, bottom, left, z-index 의 값을 주어도 무시된다.

 

 

2. position: relative;

원래 있던 자기 자리에서 그 자리를 기준으로 top, right, bottom, left의 값에 따라 배치된다.

다른 요소에 영향을 주지않고, 원래 있던 자리(공간)는 그대로 유지된다.

 

 

3. position: absolute;

기본적인 html 흐름에서 벗어나 원래 있던 자리(공간)가 없어진다.

position이 static 이 아닌 값으로 설정 되어 있는 가장 가까운 부모 요소를 기준으로 설정한 top, right, bottom, left의 값에 위치한다.

 

 

4. position: fixed;

기본적인 html 흐름에서 벗어나 원래 있던 자리(공간)가 없어진다.

뷰포트(브라우저 화면)를 기준으로 설정한 top, right, bottom, left의 값에 위치한다.

스크롤과 상관없이 화면에서 고정된 위치에 배치하고자 할 때 사용한다.

 

 

5. position: sticky;

다른 요소에 영향을 주지않고, 원래 있던 자리(공간)는 그대로 유지된다.

부모 요소가 스크롤 되어 뷰포트를 기준으로 설정한 해당 요소의 위치 값에 도달하면 fixed 처럼 그 위치에 고정된다.

해당 요소의 위치 값에 도달하기 전이나 부모 요소가 뷰포트를 벗어난 후에는 static 처럼 html상의 원래 자기 자리에 위치한다.

부모요소에 overflow: hidden | scroll | auto ; 가 설정되어 있으면 position: sticky; 가 동작하지 않는다.

그리고 부모요소에 height 값이 반드시 설정되어 있어야 한다.

 

See the Pen Untitled by Eunji Jeon (@emcjrl) on CodePen.

 

 

---

 

 

2022.12.03 - [CSS] - [CSS] display 속성 정리(block, inline, inline-block 등)

[CSS] display 속성 정리(block, inline, inline-block 등)

 

2022.11.27 - [CSS] - [CSS] flexbox의 모든 것을 알아보자

[CSS] flexbox의 모든 것을 알아보자