Position

D9·2022년 3월 30일
0

TIL

목록 보기
2/6

Position에는 크게 세가지가 가장 자주 쓰인다.

기본 디폴트값인 static은 넘어가도록 하고

첫번째는 relative,

대상의 본래 위치에서 top,bottom,right,left를 통해 절대적인 위치를 변경할 수 있다.

여기서의 기준점은 요소의 현 위치를 기준으로 각 요소들만큼 변화를 가진다.

두번째로는 absolute, absolute의 경우에는 화면왼쪽 상단점을 기준으로 top,bottom,right,left를 이용해서 위치를 변경하지만,

부모요소에 relative가 적용되어 있는경우에는 relative가 적용된 부모를 기준으로 위치가 변경된다.

fixed의 경우에는 마찬가지 왼쪽상단을 기준으로 top,bottom,right,left를 통해 위치를 변경하지만, 다른 두가지와 다른점은 fixed 는 화면의 절대적인 위치에 요소가 고정이 됩니다.

스크롤로 화면을 내려도 fixed가 적용된 요소는 화면에서 위치가 변경되지 않습니다.


position은 페이지의 레이아웃이나 디자인시 중요하게 쓰이기 때문에,

좀 더 연습해보고 나중에 다양한 경우를 확인해보면서, 블로그도 업데이트 해야할듯.

profile
새로운 시작

0개의 댓글