기본 콘텐츠로 건너뛰기

라벨이 fixed인 게시물 표시

position ( fixed, sticky )

  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처럼 행동을 하지만 스크롤로 지나간 후 부터는 스크롤영역을 따라가는 것을 확인 할 수 있다. 이걸로 다음 포스팅에서는 재미있는 예제를 보여주도록하겠다.