fixed
fixed의 경우 컨테이닝 블록을 따져보아야 한다.
1. 뷰포트
* 뷰포트라는 말을 처음들어본 분이 있을지 모르니 간단하게 기기 해상도에 따른 화면 사이즈라고 보면 된다.
2. 특이상황에서의 조상
1) transform이나 perspective (en-US) 속성이 none이 아님.
2) will-change 속성이 transform이나 perspective임.
3) filter 속성이 none임. (Firefox에선 will-change가 filter일 때도 적용)
=> filter가 none일 때에는 특정 조건이 뭔지 파악이 애매함.
4) contain 속성이 paint임.
위의 조건에 따라 생긴 컨테이닝 블록을 기준으로 top, right, bottom, left 요소를 사용 할 수 있다. position absolute의 컨테이닝 블록이 될 수 있다. 새로운 쌓임 맥락을 생성한다.
sticky
가장 난해한 규칙과 행동을 보여주는 position 속성일 수 있다. sticky속성인 경우에는 스크롤이 가장 중요하다. 뭐 물론 테이블에도 이용이 가능하지만, 웬만해서는 요즘에는 테이블을 쓰지 않으니 설명은 생략 하겠다.
sticky는 위의 예제를 보는 것이 좀 더 해당 속성에 잘 설명이 될 수 있다.
위의 예제 처럼 스크롤이 해당 영역을 지나가기 전에는 relative처럼 행동을 하지만 스크롤로 지나간 후 부터는 스크롤영역을 따라가는 것을 확인 할 수 있다. 이걸로 다음 포스팅에서는 재미있는 예제를 보여주도록하겠다.
댓글
댓글 쓰기