position sticky 속성 사용법 총정리 (sticky적용이안된다고?내가도와줌)

position sticky 속성 사용법 총정리 (sticky적용이안된다고?내가도와줌)

position속성은 html의 위치를 설정해줌

 

------------------------------- position 속성의 종류 :: static, relative, absolute,  fixed, sticky

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;

(z-index는 알아서 설정하길~)

 

 

 

5. sticky ::   최초 relative속성과 같이 동작하다가 , 스크롤시 지정 지점에서 요소를 고정시킨다.

 

 

------------------------------------- position sticky 속성 사용법

 

 

<position sticky가 동작안하는 이유? 부모요소 조건있음~ >

1. sticky속성을 갖는 요소들은 자신의 부모 요소안에서만 적용됨.

2. 부모태그에 무조건 height 높이 값이 들어가 있어야함.

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

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

3. IE지원X, IE는 잘안쓰니까 3번은 패스~

 

백번말보다 그냥 예제로 보자~ sticky half

요즘 많이사용하는 왼쪽 img 3장, 오른쪽 text sticky 적용해본다.

 

 

 

 

 

참고로, 더미이미지사용과  jsfiddle 티스토리 적용이 궁금한 사람들은 이거 보길~

[jsfiddle] 티스토리 적용 (+더미이미지사용)