CSS position

 

position: static;

특정 지정 값에 영향을 받지 않고 문서의 정상적인 흐름에 따라 배치된다.

position: relative;

top, right, bottom, left 값에 따라 위치가 변경된다.

position: fixed;

top, right, bottom, left 값에 컨텐츠가 고정 된다.

position: absolute;

상위요소 기준으로 컨텐츠가 정해진다.

position: sticky;

스크롤 했을 때의 위치. 스크롤 되다가 지정한 위치에 정지하고 다른 컨텐츠와 달리 스크롤이 멈춘다.

 

z-index: 숫자;

겹치는 컨텐츠의 순서를 정의한다. 숫자가 클수록 위에 보이며 -(마이너스)값을 가진다.

 

See the Pen position by nilgi (@nilgi) on CodePen.