728x90
position이란
position 속성은 HTML 문서에 요소가 배치되는 방식을 결정한다.
대부분 position 속성으로 배치 방식을 결정하고top, bottom, left, right 속성으로 위치를 결정한다.
position:static (default)
position 속성을 지정하지 않으면 default값으로 static이 적용된다.
HTML에 작성된 순서대로 브라우저 화면에 표시가 된다.top, bottom, left, right 속성 값은 무시된다.
position:relative
원래 위치를 기준으로 상대적으로 배치하는 방법이다.top, bottom, left, right 속성을 이용해서 요소가 원래 위치에서 얼마나 떨어질지 정할 수 있다.
position:absolute
position 속성이 static이 아닌 첫 번째 상위 요소를 기준으로 배치하는 방법이다.
만약 static이 아닌 요소가 없다면, DOM 트리 최상위에 있는 <body> 요소가 배치 기준이 된다.
HTML 문서 상에서 독립되어 앞, 뒤 요소들과 상호작용을 하지 않는다.
position:fixed
항상 고정된 위치에 배치하는 방법이다.fixed 속성값의 배치 기준은 viewport(브라우저 전체 화면)이다.top, bottom, left, right 속성을 사용해서 브라우저에서의 위치를 정할 수 있다.
HTML 문서 상에서 독립되어 앞, 뒤 요소들과 상호작용을 하지 않는다.
position:sticky
스크롤 시 고정된 위치에 요소를 배치하는 방법이다.top, bottom, left, right 속성을 사용해서 고정할 위치를 지정한다.
참고자료
반응형
'개발공부 > 웹' 카테고리의 다른 글
| [PWA] 서비스 워커란? + 특징 (0) | 2022.03.05 |
|---|---|
| [PWA] 프로그레시브 웹 앱(Progressive Web App) 소개, 등장 배경, 특징 (0) | 2022.03.03 |
| [CSS] 가로, 세로, 중앙 정렬 (0) | 2022.02.05 |
| [CSS] :root 클래스로 css 변수 만들기 (0) | 2022.02.04 |
| RESTful API란? (0) | 2021.11.05 |