CSS - position의 속성과 특징

 * position 속성값

1. static
2. relative
3. absolute
4. fixed
5. sticky

* 사용 방법

.page{
	position: relative;
    top: 30px;
    right: 50px;
}

1. static

• 기본값.
• 요소를 일반적인 문서흐름에 따라 [ 왼쪽 -> 오른쪽 , 위 -> 아래 ] 로 배치한다.
• top, right, bottom, left, z-index 속성이 아무런 영향을 주지 않는다.

2. relative

기준 : 원래 있던 위치

• 요소를 일반적인 문서 흐름에 따라 배치한다.
• 자기 자신을 기준으로 top, right, bottom, left 속성으로 주어진 픽셀만큼 오프셋을 적용한다.
• 오프셋은 다른 요소에 영향을 주지 않는다. (레이아웃에서 요소가 차지하는 공간이 static 일 때와 같다.)
• 이동은 모두 태그의 안쪽으로 이루어지기 때문에, 태그 바깥으로 이동시키고 싶다면 음수값을 줘야한다.
• z-index의 값이 auto가 아니라면 새로운 쌓임 맥락을 생성한다.

3. absolute

기준 : 가장 가까운 포지셔닝된 조상요소

• 요소를 일반적은 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않는다.
• 가장 가까운 포지셔닝 된 조상요소를 기준으로 해당 위치에 배치된다.
• 조상중에 포지셔닝된 조상요소가 없다면 body태그가 기준이 된다.
• 최종 위치는 top, right, bototom, left 값이 지정한다.
• z-index의 값이 auto가 아니라면 새로운 쌓임맥락을 생성한다. 
• 절대위치 지정 요소의 바깥 여백은 서로 상쇄되지 않는다.
• inset 속성은 top, right, bottom, left 에 모두 같은 값을 줄 때 사용된다.
• inset을 0으로 주면 대상에 꽉 차게 배치할 수 있다.
• top, bottom에 동시에 0을 주면 위아래로 가득 차게 배치할 수 있다.
• 크기를 정해주지않으면 내용물 만큼의 크기를 가진다.( 보통은 부모의 크기를 상속받는데 얘는 그렇지 않음 )

4. fixed

기준 : 브라우저 화면(뷰포트)

• 요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않는다.
• 주어진 위치에 고정된다.(스크롤을 내려도 위치가 고정된다.)
• 최종 위치는 top, right, bototom, left 값이 지정한다.
• 이 값은 항상 새로운 쌓임맥락을 생성한다.
• 단, 요소의 조상 중 하나가 transform, perspective, filter 속성 중 어느 하나라도 none이 아니라면 뷰포트 대신 그 조상을 컨테이닝 블록으로 삼는다.

5. sticky

기준 : 브라우저

• 요소를 일반적인 문서 흐름에 따라 배치한다.
• 테이블 관련요소를 포함해 가장 가까운, 스크롤되는 조상과, 표관련요소를 포함한 컨테이닝 블록을 기준으로 한다.
• top, right, bototom, left 의 값에 따라 오프셋을 적용한다.
• 원래 자리를 차지하고 있다고 주어진 위치에 닿으면 달라붙는다.
• 지정 위치에 오기 전까지는 static, 위치에 온 후에는 fixed처럼 보인다.
• 부모요소에 갇혀있기 때문에, 부모요소가 화면 밖으로 사라지면 같이 사라진다.
• 부모요소가 스크롤불가능하고, 스크롤가능한 다른 조상이 있는 경우 정상동작하지 않을 수 있다.
• 이 값은 항상 새로운 쌓임맥락을 생성한다.
• z-index의 기본값은 auto라고 함.

 

참조 :

https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade

https://medium.com/baakademi/css-position-property-69d0596baf3c