CSS : Position 알아보기

• Position

※ 설명
- 문서 상에 요소를 배치하는 방법을 지정한다.
- top, left, right, bottom 값을 통해 오프셋을 결정한다.

※ 기본 사용법

속성	설명
static (기본값)	문서의 흐름에 맞게 배치한다.
relative	문서의 흐름에 맞게 배치하지만, 오프셋을 top, left, right, bottom 값을 통해 정한다.
absolute	문서의 흐름에서 제외하고, 가장 가까운 부모 요소(relative)를 찾아 상대적인 위치에 배치한다. 부모 요소중 relative가 없을 경우 초기 컨테이닝 블록을 기준으로 배치한다.
fixed	문서의 흐름에서 제외하고, 초기 컨테이닝 블록을 기준으로 고정된 위치에 배치한다. (주로 header에 많이 사용)
sticky	static + fixed 방식으로, fixed 속성을 가지고 있는 요소는 부모 요소의 height만큼 고정되고 그 후에는 static과 동일한 흐름으로 배치된다.

※ 사용 꿀팁 (가운데 정렬)

부모 요소 {
    position: relative;
}

자식 요소 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

※ 참고 사이트
- https://developer.mozilla.org/ko/docs/Web/CSS/position