알찬정보 툰코 개발 트렌드 이슈 코딩

1. static :: 기본설정값, 정적, top-right-left-bottom속성영향X
 
2. relative :: 상대, 상위객체에 사용,
렐러티브(relative)는 html요소의 기본위치를 기준으로 설정한다.
 
3. absolute :: 절대, 하위객체에 사용,
예를 들어, 상위인 렐러티브(relative)를 잡았으면  하위 앱솔루트(absolute)를 사용한다.
겹치기 설정할때,  렐러티브(relative)와 앱솔루트(absolute)를 자주 사용한다.
쉽게설명하자면, relative는 상대적 기준위치이고, absolute를  (relative의 상대적 기준위치에서)  top-right-left-bottom속성을 적용하여 준다.
 
4. fixed :: 고정, 보통 header에 자주 사용,
웹페이지 고정위치에 항상!! 그 곳 그자리에 위치한다.(스크롤시에도)
보통 header라고 보면 될듯~ 상황에 따라 header의 position은 알아서 변경하길~
자주사용하는 position :fixed; top:0; left:0; z-index: 999;

 
 
 
5. sticky ::   최초 relative속성과 같이 동작하다가 , 스크롤시 지정 지점에서 요소를 고정시킨다.
 
 
————————————- position sticky 속성 사용법
 
 
<position sticky가 동작안하는 이유? 부모요소 조건있음

1. sticky속성을 갖는 요소들은 자신의 부모 요소안에서만 적용됨.
2. 부모태그에 무조건 height 높이 값이 들어가 있어야함.

——-부모  height 높이 값만큼 sticky가 고정된다!!!!!!

3. 부모요소중에 overflow: hidden, auto, scroll 속성이 적용되어 있으면 안된다.