1. position
position은 HTML 요소의 위치(배치)를 결정하는 방식을 설정하는 태그이다.
좌표를 가지고 어떻게 배치할지를 결정을 한다.
좌표의 기준은 부모 요소의 좌측상단 모서리가 0,0으로 간주된다.
좌표 설정은 top, right, left, bottom 태그를 이용한다. 각각의 태그는 얼마나 떨어져있는지, 여백을 결정하는 것이다.
| top | 부모 요소의 위로부터의 여백 |
| right | 부모 요소의 오른쪽으로부터의 여백 |
| bottom | 부모 요소의 아래로부터의 여백 |
| left | 부모요소의 왼쪽으로부터의 여백 |
2. position 속성
1. static
기본 위치값 / top, right, bottom, left 배치 속성값에 영향을 받지 않는다. HTML 문서 상에서 원래 있어야하는 위치에 배치된다.
2. relative
원래 출력되어야 할 기본 위치(static)를 기준으로 위치를 설정하는 방식이다. 원래 출력되야하는 곳 기준으로 위치가 잡힌다.
3. absolute
부모 요소 기준으로 위치를 설정하는 방식으로 배치 기준을 자신이 아닌 상위 요소에서 찾는다.
position: static 속성을 가지고 있지 않은 조상을 기준으로 한다. 부모요소 모두 position 속성이 없는 경우에는 <body> 기준이 된다.
4. fixed
뷰포트(viewport)를 기준으로 위치를 설정하는 방식으로 웹브라우저 전체 화면이 기준이 된다.
웹 페이지가 스크롤 되어도 fixed로 지정된 요소의 위치가 변하지 않는다.
| static | relative | absolute | fixed | |
| 기준 | 기본 위치 (배치속성 영향x) | 원래 출력되어야 할 기본 위치 | 부모 요소 | 뷰포트 (웹브라우저) |
'WEB > CSS' 카테고리의 다른 글
| 가상 클래스 (추상 클래스, 의사 클래스, Pseudo-class) (0) | 2022.06.07 |
|---|---|
| 요소 배치 태그 : float / float 태그 해제 : clear (0) | 2022.06.07 |
| Box Model / content-box, border-box / background-clip / 배경 이미지 설정 태그 (1) | 2022.05.31 |
| 넘치는 텍스트, 공백 표현하는 태그 : overflow, text-overflow, white-space (0) | 2022.05.30 |
| 목록태그 CSS : 리스트 블릿기호 변경, 들여쓰기/내어쓰기 (0) | 2022.05.30 |