[CSS] - position (static, relative, absolute) 이해하기 - 2탄

fixed

 

fixed 속성값은 absolute 와 같이 흐름에 상관없이 아무 위치나 좌표로 설정이 가능합니다.

단. 기준점은 부모 또는 조상 객체가 아닌 브라우저를 기준으로 하여 하위에 속해 있어도 영향을 받지 않습니다.

(무조건 브라우저 창 기준점을 기준으로 한다.)

 

See the Pen fixed by solutiona80 (@solutiona80) on CodePen.

 

 

예제를 보면 파란색 배경의 div가 fixed로 설정되어있습니다.

마우스 휠을 돌려서 스크롤을 이동시켜도 파란색 배경의 div는 고정으로 변하지 않습니다.

 

css를 보면 .content에서 top 15px를 주어서 파란색 박스와 겹치지 않게 아래로 이동 시켜 놓았고 이때 position이 기본인 static인 상태라면 top 속성이 안먹기 때문에 position을 relative로 변경해서 top 속성을 넣었습니다.

 

 

 

 

 

 

sticky

position : sticky 속성은 기준점을 기준으로 평소에는 문서 안에서 position :  static 상태와 같이 일반적인 흐름을 따르지만 스크롤 위치가 임계점에 이르면 position : fixed로 변경된다.

특정 객체를 영역안에서 이동을 시키면서 스크롤에 의해 영역을 벗어나면 화면에 고정하게 할 수 있는 속성입니다.

 

단점. IE 11 브라우저와 안드로이드 4.x 이하 버전에서는 지원하지 않습니다.

 

See the Pen Untitled by solutiona80 (@solutiona80) on CodePen.

 

 

 

 

예제를 보면 스크롤로 화면 이동시 box2는 relative 상태로 있다가 box2의 속성에 top:50px이라고 설정된 위치보다 작아지면 fixed 처럼 고정되었다가 viewport(화면에 보여지는 부분) 부분이 빨간색 테두리 영역을 벗어나게 되면 relative로 변경되어 화면에서 사라지게 됩니다.

 

 

sticky 특징

1. sticky를 가진 객체는 top, left, right, bottom의 속성이 꼭 필요합니다.

2. sticky를 가진 객체를 고정하는 임계점은 스크롤 위치(자신의 부모의 위치와 크기도 포함)로 결정합니다.

3. stick를 가진 객체의 부모 영역이 scroll 영역을 벗어나면 stick를 가진 객체는 다시 일반적인 흐름에 따릅니다.

4. stick를 가진 객체와 다른 stick를 가진 객체 사이에 overflow: hidden 속성을 가진 객체가 생성되면 stick를 가진 객체들은 다시 일반적인 흐름에 따릅니다.

 

 

포스팅이 도움이 되셨으면 좋아요, 댓글, 그리고 커피 한잔의 여유 부탁드립니다.

 

- 관련 글 -

CSS - position (static, relative, absolute) 이해하기 - 1탄