1. position
position이란 웹 페이지에서 html 태그나 id, class 박스 등의 위치를 지정해주는 속성.
요소를 배치하는 방법을 지정한다.
position property values
- static
- relative
- absolute
- fixed
- sticky
1-1. static
position 속성의 기본값인 static. 문서의 일반적인 흐름에 따라 html에 쓰여진 순으로 위치가 지정된다.
기본값이기 때문에 따로 적용해주지 않아도 되지만,
부모 객체에서 다른 position 속성값이 주어졌을 때, 이를 무시하기 위해 사용될 때가 있다.
1-2. relative
자신이 원래 있어야 하는 위치를 기억하고 이에 상대적인 속성을 가진 relative.
position: relative;값을 주고 top, left 등을 조정하면 자신의 원래 위치에서 주어진 값만큼 떨어진 자리에 위치한다.
* 문서의 일빈적인 흐름에따라 배치함.
* relative 속성으로 움직여도, 다음 콘텐츠들은 움직이지 않음.
* 페이지 레이아웃에서 relative를 준 요소가 차지하는 공간은 static일 때와 같음.
* z-index의 값이 auto가 아니라면 새로운 쌓임 맥락을 생성함.1-3. absolute
부모요소의 박스 내를 기준으로 위치하는 absolute.
top, left, right, bottom 등과 함께 사용된다.
static이 아닌 position 속성을 가진 가장 가까운 부모의 박스를 기준으로 위치하게 된다.
조상 요소중에 position속성을 가진 요소가 없다면 초기 컨테이닝 블록을 기준점으로 두게 된다. (html)
최종 위치는 top, left, right, bottom의 값이 지정한다.
* 요소를 일반적인 문서 흐름에서 제거함.
* 페이지 레이아웃에 공간 배정하지 않음.
* z-index의 값이 auto가 아니라면 새로운 쌓임 맥락을 생섬함.
* 절대 위치 지정 요소의 바깥 여백은 서로 상쇄되지 않음.1-4. fixed
뷰포트를 기준으로 화면에 붙은 것 처럼 위치하는 fixed 속성
absolute 가 position 속성을 가진 가장 가까운 부모를 기준으로 위치를 정하는 것 처럼, fixed는 현재 사용자가 보고 있는 뷰포트를 기준으로 마치 화면에 붙은 것처럼 그 자리에 계속해서 위치한다.
페이지가 스크롤 되어도 중요한 정보(네비게이션 같은)를 화면에 계속 노출 시켜주기 위해 많이 사용하는 속성이다.
* 요소를 일반적인 문서 흐름에서 제거함.
* 페이지 레이아웃에 공간 배정하지 않음.
* 뷰포트의 초기 컨테이닝 블록을 기준으로 삼아 배치함.
* 요소의 조상이 transform, perspective, filter 속성 중 하나라도 none이 아니라면,
뷰포트 대신 그 조상을 컨테이닝 블록으로 삼음.
(perspective와 filter의 경우 브라우저별로 결과가 다름에 유의)
* 새로운 쌓임 맥락을 생성함.1-5. sticky
부모 요소에게 붙는 sticky 속성
top, right, bottom, left중 하나의 값이라도 설정돼 있어야 한다.
* 요소를 일반적인 문서 흐름에 따라 배치함
* 새로운 쌓임 맥락을 생성합니다.
* 부모 또는 조상 요소에 overflow 속성이 설정되어 있으면 동작하지 않음.
* 부모 요소는 반드시 height 설정돼 있어야 함.(%는 동작하지 않음)
* IE 지원하지 않음. static처럼 동작함.
* Safari에서 동작하게 하려면, -webkit-sticky 속성 추가 필요
https://caniuse.com/?search=sticky
1-6. top, left, right, bottom
1-7. z-index
요소들의 수직 위치를 결정하는 z-index 속성
숫자가 크면 위로 올라가고, 숫자가 작으면 아래로 내려간다. (자신이 있어야 하는 위치에 상대적인 값)
* 같은 값이라면 나중에 마크업된 요소가 위로 올라온다.
* 부모가 z-index를 높여 자식 앞으로 나올 수 없음.
* 자식이 z-index를 낮춰 부모 뒤로 가는 것은 가능함.2. fixed vs sticky
2-1. fixed
2.2 sticky
