Position 속성 - relative, absolute, fixed
position 속성을 통해 문서 상에 요소를 배치하는 방법을 지정한다.
position 의 default 값은 static으로 되어 있다.
사용법은 간단하다.
- 기준을 잡는다. (예- position: relative;)
- 이동시킨다. (예- top: 50px;)
요소를 옮기려면 일단 위치를 옮길 기준점을 잡는다.
| 값 | 의미 |
|---|---|
| static | 기준 없음 (배치 불가능 / 기본값) |
| relative | 요소 자기 자신을 기준으로 배치 |
| absolute | 부모(조상) 요소를 기준으로 배치 |
| fixed | 뷰포트 기준으로 배치 |
| stickey | 스크롤 영역 기준으로 배치 |
Top, Bottom, Left, Right 속성
요소의 Position 기준에 맞춰 위쪽, 아래쪽, 왼쪽, 오른쪽에서의 거리를 설정한다.
- top : 요소의 position 기준에 맞는 위쪽에서의 거리 (위치)를 설정
- bottom : 요소의 position 기준에 맞는 아래쪽에서의 거리(위치)를 설정
- left : 요소의 position 기준에 맞는 왼쪽에서의 거리(위치)를 설정
- right : 요소의 position 기준에 맞는 오른쪽에서의 거리(위치)를 설정
inline / block / inline-block
- inline
- 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치.
- 다른 요소들과 수평으로 정렬, weight과 height의 크기 설정 불가능
ex) span, a, em 태그
margin과 padding 속성은 좌우 간격만 반영이 되고, 상하 간격은 반영이 되지 않는다.
- block
- 다른 요소들과 수직으로 정렬, 가로와 세로 크기 지정 불가능
- 전후 줄바꿈이 들어가 다른 엘리먼트들을 다른 줄로 밀어내고 혼자 한 줄을 차지
ex) div, p, h1
width, height, margin, padding 속성이 모두 반영 될 수 있다.
- inline-block
- weight과 height의 크기 설정 가능, 다른 요소들과 수평으로 정렬
ex) button이나 input, select
display: inline-block로 지정해줘야 한다.
inline 엘리먼트처럼 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치되지만, block 엘리먼트처럼 width와 height 속성 지정 및 margin과 padding 속성의 상하 간격 지정이 가능하다.
