[Day 11] CSS position / fixed와 sticky

Position

 

position은 위치를 정해주는 속성으로

 

크게

1. static

2. relative

3. absolute

4. fixed

5. sticky

가 있다.

 

1. static은 디폴트값으로, 

순서대로 엘리먼트를 위치시킨다.

 

2. relative는 위치를 상대적으로 설정한다.

자기 자신의 position을 relative로 설정 후

top/bottom/left/right 등으로 세부 위치를 조절한다.

 

3. absolute는 position 속성이 설정된 부모 요소 기준으로 위치한다.

그 부모 요소의 위치를 기준으로  자기 자신에게 top/bottom/left/right 등으로 세부 위치를 조절한다.

 

 

position: fixed vs sticky

fixed 는 흔히 특정 박스가 스크롤 시에도 고정되어 움직이지 않을 때 사용된다.

반면, sticky가 쓰여진 요소는 부모에 붙게 된다!

 

See the Pen Untitled by Dahee Jo (@daheejo) on CodePen.

 

이 코드에서

sticky가 적용된 h2는 자신의 부모인 h1에 붙는데,

이때 스크롤하면서 h2의 콘텐츠가 바뀐다.

 

두번째 예시도 살펴보자.

See the Pen sticky_fixed by Dahee Jo (@daheejo) on CodePen.

 

 

이 예시에선 aside 태그에 fixed 혹은 sticky가 적용되었다.

fixed인 경우 스크롤이 내려가는대로 aside도 내려가지만,

sticky인 경우, 부모요소인 section 영역에만 붙어서 움직인다.

 

더 공부해야할 것

positon을 공부하다보니 자연스레 따라오는 가운데 정렬....

가운데 정렬은 방법도 많고 부모자식이냐 자식들이냐,, 등등에 따라 적용할 수 있는 방법이 다르기 때문에

특히 더 어려운 것 같다.. 이번 주말에 가운데정렬만 다시 케이스별로 분류해서 정리를 해야겠다.

 + 호준님께서 보강해주신 내용도 다시 보고 정리하기!