position
- 어떤 종류의 position을 사용하는가
- 위 position은 무엇을 기준으로 요소를 위치시키는가
static
- 모든 요소의 기본 postion 값
- 가장 일반적인 상태
relative
- 기준점 : 본래 요소가 위치했던 자리
- relative도 float와 마찬가지로, 붕 떠 있는 상태가 되지만,
부모 요소와 형제 요소는 relative가 적용된 요소를 기억하고 있음!
- 따라서 relative로 이동해도 레이아웃이 무너지지 않음
- ex) div{
position : relative;
top : 5px // 아래로 5px 이동!
right : 5px // 왼쪽으로 5px 이동!
- relative는 반대 방향으로 이동한다
absolute
- 기준점 : position이 static이 아닌 요소를 기준으로 위치
- 어떤 조상 요소를 기준으로 움직일 것인지에 대한 기준점 설정이 필요(주로 relative// 타 요소에 영향을 미치지 않기 때문)
- 적용된 요소는 block으로 변함
- 길막을 하지 못함! ( margin X)
- inline 요소가 absolute 요소를 인지 못함
- ex)
div{
position : absolute;
top : 5px; // 조상 요소의 위쪽 테두리에서 5px 안쪽으로 이동(즉, 아래로 5px 이동함)
left : 5px; // 조상 요소의 왼쪽 테두리에서 5px 안쪽으로 이동(즉, 오른쪽으로 5px 이동함)
fixed
- 기준점 : viewport를 기준으로 함
cf) viewport란 브라우저 창의 전체 크기를 의미
- 적용된 요소는 block으로 변하는 등 특징은 absolute와 유사
- ex)
div{
position : fixed;
top : 5px; // viewport 위쪽 테두리를 기준으로 안쪽으로 5px 이동
left : 5px; // viewport 왼쪽 테두리를 기준으로 안쪽으로 5px 이동
top, bottom, left, right 사용 시 주의할 점
- 위 요소 사용 시 (top, bottom) 중 하나, (left, right) 중 하나만 사용하자!
- 즉, 한 요소에 대해 left, right를 동시에 사용하지 말자!
- or, 정렬에 많은 어려움을 겪을 수 있음
z-index ( z-index : 정수)
- 한 요소의 z축을 결정할 때 사용
- 예를 들어, 붉은 사각형을 푸른 사각형의 위로 위치시키고 싶다면
z-index의 값을 붉은 사각형에게 더 크게 부여해야
ex)
.red{
z-index :3;}
.blue{
z-index:2;}