CSS Position 속성 5가지 정리

position 이란?

position은 이름에서 알 수 있듯이 element배치하는 방법을 지정해주는 속성이라고 하며, static, relative, absolute, fixed, sticky 5가지가 있다.

1. static

• default 값으로 명시되어 있지 않을 경우 position : static; 으로 적용
• 문서의 흐름에 따라 element 배치
• top, right , bottom, left, z-index 속성에 영향을 받지 않음

2. relative

• 문서의 흐름에 따라 element 배치
• top, right , bottom, left 를 주면 static이었을 때의 위치에서 주어진 값만큼 이동

.top {
	position: relative;
	top: 50px;
}

위와 같이 적용해보자. top을 50px만큼 줬기 때문에 기존 위치에서 아래로 50px만큼 내려 가는 것을 볼 수 있을 것이다.

3. absolute

• 일반적인 문서 흐름에서 element를 제거
• 요소의 공간도 배정하지 않음
• 가장 가까운 부모(위치 지정 요소)에 대해 상대적으로 배치

  위치 지정 요소 : static이 아닌 모든 요소(relative, absolute, fixed, sticky)

• 부모 중에 static이 아닌 요소가 없다면 최상위 태그에 상대적으로 배치한다.

.right {
	position: absolute;
	right: 50px;
}

위의 경우,
position: static; 이 아닌 parent 요소가 있으면 : parent에서 왼쪽으로 50px만큼 떨어질 것이다.

없을 경우, 최상위 태그인 에서 왼쪽으로 10px만큼 떨어진다.

4. fixed

• element를 특정 위치에 고정함
• top, right, bottom, left의 값으로 위치를 지정

5.sticky

• 스크롤이 특정 위치에 왔을 때 요소를 지나치지 않고 고정해주는 역할
• top, right, bottom, left 의 값으로 위치를 지정 가능
• static하게 문서에 위치해있다가 스크롤에 따라 fixed처럼 동작하게 함
• 상단에 공간ㄴ을 두고 위치에 있던 네비게이션 바가 스크롤 시에 상단에 붙게 되는 경우 주로 사용

.nav-bar {
	position: sticky;
	top: 0;
}