[CSS] Position에 대해 알아보자

기본적으로 block, inline, inline-block 글의 흐름대로 배치되는 레이아웃을 normal flow라고 한다. 하지만 이것만으로는 다양한

레이아웃을 구성 할 수 없고 이 흐름에서 벗어나기 위해 position속성과 display속성에 flex와 grid가 있다

여기서는 position에 대해 다뤄보겠다 

0. top, right, bottom, left, inset

position의 위치를 지정하는 속성이다 음수값은 바깥으로 양수값은 안쪽으로 이동하게 되고 left와 right에 0을 줘서 width 100%의 효과를 만들 수도 있다

div{
    position : relative;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

위와 같이 4개의 속성에 다 0을 주면 해당 공간을 가득 채우게 된다

inset은 4가지 속성을 1개의 속성으로 사용 할 수 있게 해준다

div{
    position: relative;
    inset: 0; /* top: 0, right: 0, bottom: 0; left: 0; */
    inset: 1px 0; /* top: 1px, right: 0, bottom: 1px; left: 0; */
    inset: 1px 2px 1px; /* top: 1px, right: 2px, bottom: 2px; left: 1px; */
    inset: 1px 2px 3px 4px; /* top: 1px, right: 2px, bottom: 3px; left: 4px; */
}

1. static

position의 기본값이다. 말그대로 position이 적용되어 있지 않는 상태, top, right, bottom, right, inset속성이 작동하지 않는다

div{
    position : static;
}

 

2. relative

현재 요소의 위치를 기준으로 top, right, bottom, left, inset을 통해 배치를 변경할 수 있다 이때 원래 위치는 빈공간이 차지하게 된다

div{
    position : relative;
    top: 0;
}

 

3. absolute

포지셔닝된 부모요소 기준으로 top, right, bottom, left, inset을 통해 배치를 변경 할 수 있다 이때 원래 위치는 사라져서 다른 요소가 채워진다

div{
    position : relative;
}
div > div{
    position : absolute;
    top: 0;
    left: 0;
}

 

4. fixed

현재 디바이스의 화면을 기준으로 top, right, bottom, left, inset을 통해 배치를변경 할 수 있다 이때 원래 위치는 사라져서 다른 요소가 채워준다

div{
    position : fixed;
    bottom: 0px;
    right: 0px;
}

 

5. sticky

현재 디바이스의 화면을 기준으로 top, right, bottom, left, inset을 통해 배치를변경 할 수 있다. 단 포지셔닝되는 기준은 요소가 scroll-top 즉 스크롤로 인해 화면의 최상단에 닿았을 때 fixed와 같은 동작을 한다. 작동하기 전까지는 해당 위치를 차지한다

div{
    position : sticky;
    bottom: 0px;
    right: 0px;
}

 

정리

static은 기본값이라 제외

	기준	기존 위치 변화
relative	현재 위치	빈공간이 차지
absolute	포지셔닝된 부모요소 기준	원래 있던 공간 사라짐
fixed	화면 기준	원래 있던 공간 사라짐
sticky	화면 기준	원래 있던 공간 사라짐