Position
- 요소의 위치 지정을 위해 사용한다.
- 요소의 위치는
top, right, bottom, left 네개의 속성으로 지정할 수 있는데, 이 때 상충되는 속성(top 과 bottom 혹은 right 와 left)을 동시에 사용하여서는 안된다.
- 기본값 :
static
- 속성값
static : 요소가 본래 위치해야하는 위치에 위치하며, 위치를 조정할 수 있는 속성을 모두 무시한다.relative : 요소의 position이 static 일때의 위치를 기준으로 움직인다.absolute : position 속성값이 static 이 아닌 가장 가까운 부모/선조를 기준으로 움직인다.
position 속성값이 static 이 아닌 가장 가까운 부모/선조가 없을 경우 문서자체를 기준으로 한다.- 다른 요소의 흐름에 영향을 미치지 않는다.(공간 차지를 하지않는다.)
fixed : 문서자체를 기준으로 위치를 잡고, 스크롤에 영향을 받지 않는다.
- 다른 요소의 흐름에 영향을 미치지 않는다.(공간을 차지하지 않는다.)
Position 이 static 아닐 경우
1) top
- 요소의 위쪽 테두리와 기준이 되는 요소의 위쪽 테두리간의 사이 공간을 지정한다.
- 기본값 :
0
- 속성값 :
[크기]2) right
- 요소의 오른쪽 테두리와 기준이 되는 요소의 오른쪽 테두리간의 사이 공간을 지정한다.
- 기본값 :
0
- 속성값 :
[크기]3) bottom
- 요소의 아래쪽 테두리와 기준이 되는 요소의 아래쪽 테두리간의 사이 공간을 지정한다.
- 기본값 :
0
- 속성값 :
[크기]4) left
- 요소의 왼쪽 테두리와 기준이 되는 요소의 왼쪽 테두리간의 사이 공간을 지정한다.
- 기본값 :
0
- 속성값 :
[크기]5) z-index
- 요소의 표시 우선순위를 지정한다. 숫자가 클수록 사용자에게 더 가까운 레이어에 배치되게 된다.
position 속성 값이 static 일 경우 적용되지 않는다.- 동일한
z-index 값을 가지는 요소들인 경우 HTML 문서상 보다 아래에 위치한 요소가 사용자에게 더 가까운 레이어에 배치한다.
- 기본값 :
0
- 속성값 : 정수
3. 형식
[Tag] or [.class] or [#id]{
position : [속성값];
/* 속성값이 static이 아닐경우 사용*/
top : [크기];
right : [크기];
bottom : [크기];
left : [크기];
z-index : [정수];
}