CSS : 위치 속성 position 기본과 활용
* position의 모든 속성은 위치를 추가로 잡기 위해 left, right, top, bottom 속성을 가질 수 있습니다.
* float와 다르게 다양한 위치 설정이 가능합니다.
* 필요 이상 남발 시 반응형웹 설계에 방해요소가 될 수도 있습니다.
* 웹 사이트의 교차대상 및 고정 대상에 주로 사용합니다.
position:static(기본값)
* 모든 position 관련 속성은 relative, absolute, fixed, sticky중 1개를 필수로 작성하여 위치 기준을 설정해야 하며
그 다음 left, right, top, bottom 속성을 사용하여 원하는 위치로 대상을 이동합니다.
1. position:relative(필수) / left , right , top , bottom(보조)
* 자기 자신의 현재 위치를 기준으로 움직입니다.
* absolute의 기준으로 부모 위치를 잡을 때도 사용합니다.
selector {
position:relative;
left:0; top:0;
}
2. position:absolute(필수) / left , right , top , bottom(보조)
* 부모 위치를 기준으로 상대적으로 위치를 움직입니다.
* 부모 기준은 가장 가까운 부모 기준 position 값을 인식합니다.(모든 position 가능)
selector {
position:absolute;
left:0; top:0;
}
3. position:fixed(필수) / left , right , top , bottom(보조)
* 페이지 스크롤길이와 관계없이 웹브라우저 위치에 고정됩니다.
* 팝업 요소에 주로 사용합니다.
* body를 기준으로 위치가 정해집니다.
selector {
position:fixed;
right:0; bottom:0;
}
4. position:sticky(필수) / left , right , top , bottom(보조)
* sticky 사전적 의미 : 끈적끈적한
* (위) 뜻 처럼 뷰포트(viewport) 기준 설정한 위치 값에 따라 끈적하게 붙은 모습을 유지합니다.
* left, right, top, bottom 방향에 따라 뷰포트의 x축과 y축으로 위치를 인식합니다.
* sticky의 부모가 스크롤되는 뷰포트 영역에 보이는 동안 sticky가 적용됩니다.
* sticky의 부모가 뷰포트 영역에서 벗어나면 sticky 기능도 종료됩니다.
* 인터넷 익스플로러(ie) 하위버전은 지원하지 않습니다.
* -webkit- CSS 접두어를 사용해야합니다. https://caniuse.com/
* header의 nav요소를 상단에 붙일 경우 주로 사용합니다.
selector {
position:sticky;
top:50px;
}
position 중첩순서 속성 : z-index
* -999 ~ 0 ~ +999 까지 순서를 정할 수 있습니다.(단위 작성안함)
* 중간 숫자가 필요할 시 입력이 편하도록 10단위 ~ 100단위의 큰 숫자를 위주로 많이 사용합니다.
* position 속성이 들어간 대상에 사용할 수 있습니다.
selector {
position:relative;
z-index:999;
}