html-css position 속성

river·2022년 2월 4일
0

static : 기준 없음 (position 설정하지 않을 경우 기본값)

relative : 자기 자신이 배치의 기준이 됨 (기존 위치로부터 얼마나 떨어지게 할 것인지)

absolute : 상위 요소를 기준으로 배치 (relative와 함께 사용되는 경우가 많음. 상위에 static이 아닌 요소가 없을 경우 최상위의 body를 기준으로 함) 상위 요소 중 relative같은 속성이 지정된 요소가 있을 경우 해당 요소를 기준으로 움직이는 듯...?

상위 요소인 cover div에 relative 속성을 주고,
하위 요소인 numberpad div에 absolute 속성을 부여해 
numberpad가 cover를 기준으로 움직일 수 있게 함.
bottom값을 0으로 지정해주어 cover div 최하단에 붙여주었다. 

fixed : 뷰포트 기준으로 고정배치 (ex_top버튼)

sticky : 스크롤 영역 기준으로 배치 (스크롤중 stickey 속성이 부여된 요소가 등장 이후 화면에 계속 남아 함께 스크롤링 됨) top, right, bottom, left 속성이 필수

position: sticky;
    top: 0px;
profile
가보자고

0개의 댓글