css position 정리

position은 css에서 요소를 배치하는 방법이다.

position: static;

• 기본값. 아무런 특성이 없기 때문에 주로 다른 position 값이 적용된 요소를 초기화 하고자 할 때 사용한다.

position: relative;

• 일반적인 흐름에 따라 자기 자신을 기준으로 위치 지정한다.
• top right, bottom, left 위치 특성과 함께 사용되거나 생략될 수 있음. 다른 요소에 영향을 주지 않는다.
• 주로 fixed, absolute 의 부모요소에 이 값을 준다.
• margin값으로 중앙 정렬이 가능하다.

position: absolute;

• 일반적인 흐름에서 벗어나며 position 값이 적용된 가장 가까운 부모 요소를 기준으로 위치를 지정한다.
• top, right, bottom, left와 함께 사용한다.
• 부모와 조상에 position 값이 적용된 경우, 가장 가까운 부모 요소를 기준으로 적용된다.
• margin값으로 중앙 정렬이 불가능하다.

position: fixed;

• 일반적인 흐름에서 벗어나며 브라우저를 기준으로 위치를 지정한다. top, right, bottom, left와 함께 사용.
• transform, perspective, filter가 부모 요소에 적용되어 있으면 그 요소를 기준으로 삼아 정렬된다.
• 주로 header, footer, 위로가기 버튼을 고정하는 데에 사용하는 듯하다.
• margin값으로 중앙 정렬이 불가능하다.

position: sticky;

• 일반적인 흐름을 가지나 top, right, bottom, left의 값에 따라 오프셋 적용(스크롤 이벤트)
• 요소가 작성된 위치값(ex = top: 0;)에 도달하면 흐름에서 벗어나 고정 위치의 position 성격으로 바뀐다.(찰싹 달라붙는다🐰)
• 부모 요소들 중 하나라도 overflow:hidden이 적용되어 있으면 동작하지 않는다.
• top, right, bottom, left 중 하나는 반드시 작성되어야 하며, 작성되지 않으면 relative와 동일한 성격을 가진다.

• position에 위치값을 부여할 때 x축(right, left) y축(top, bottom) 위치값 중 일반적으로 하나의 값만 작성한다.
• top, bottom 함께 설정한 경우 top 우선 적용.
• right, left 함께 설정한 경우 left 우선 적용.

absolute, fixed 값이 적용된 요소를 브라우저 기준 중앙 정렬 하는 방법.

1. 위치 속성 값에 50%, 같은 방향의 margin 값을 -'요소의 반값'으로 부여
   ex=(요소의 값이 100px일 때)
   top: 50%; margin-top: -50px;
   left: 50%; margin-left: -50px;
   bottom: 50%; margin-bottom: -50px;
   right: 50%; margin-right: -50px;
2. top:0; bottom:0; margin: auto;
   right:0; left:0; margin:auto;