728x90
어떤 태그의 위치를 지정할 때 사용하는 position 요소는 타입을 선언하고 top bottum left right 속성으로 배치한다.
relative
일반적인 문서의 흐름에 따라 배치한다.
요소 자기 자신의 원래 위치를 기준으로 배치한다.
원래 위치를 기준으로 얼마만큼 떨어질지 결정한다.(top bottom...)
위치를 이동하면서 다른 요소에 영향을 주지 않는다
문서 상 원래 위치가 그대로 유지된다.(개인적으로 header 나 무한스크롤 위치 지정 등에 이용 용이했다.)
absolute
요소를 일반적인 문서 흐름에서 제거한다.
가장 가까운 위치에 있는 부모 요소를 기준으로 배치한다.
부모 요소 위치를 기준으로 얼마만큼 떨어질지 결정한다.(top bottom...)
부모 중 Position을 가진 요소가 없다면 초기 컨테이닝 블록(<body>요소)를 기준으로 삼는다.
문서 상 원래 위치를 잃어버린다.(아래에 있는 div가 해당 자리를 차지한다.)
fixed
요소를 일반적인 문서 흐름에서 제거한다.
페이지 레이아웃에 어떠한 공간도 배정하지 않는다.
뷰포트를 기준점으로 고정된다.(쇼핑몰의 최근 본 상품 창이나, 모바일의 추가 메뉴 버튼 등에 용이했다.)
stickey
스크롤 영역 기준으로 배치한다.(fixed와 비슷하게 사용 가능)
728x90
'개발일지 > HTML l CSS' 카테고리의 다른 글
| [CSS] 배포 사이트에 다운로드 폰트 적용하기 (0) | 2023.03.31 |
|---|
댓글