CSS - position ( static, relative, absolute, fixed )

 

position - static

별도로 position : static 이라고 정의해주지 않아도 된다.

HTML 원래 있어야 하는 기본 위치에 배치된다.

static 일 경우 top left bottm right 속성값은 무시된다.

 

See the Pen Untitled by code_gray (@code_gray) on CodePen.

위의 코드 내용을 보면 1번 3번에는 명시적으로 posiotion : static 을 해주었고 2번 4번에는 하지 않았다.

4번에는 top 과 left를 주었지만 static 이라 반영되지 않는다.

 

position - relative

원래 위치를 기준으로 상대적으로 배치한다.

( 원래의 위치는 static 일때의 위치 )

tom bottom left right 속성 사용 가능하다.

 

See the Pen css - position - relative by code_gray (@code_gray) on CodePen.

아까 처음 static 인 예제에서 4번만 relative 로 변경하고 left 속성을 주었더니 잘 반영되었다.

 

position - absolute

absolute는 부모의 기준으로 위치한다.

보통 부모는 relative로 해주는게 룰 이라고는 한다.

부모가 없다면 top left right bottom 값을 0으로 주었을 때 시작위치는 브라우저의 기본 시작점이 된다.

 

See the Pen css - position - absolute by code_gray (@code_gray) on CodePen.

예시를 보면 3번 4번을 absolute로 주었다.

1번은 static 2번은 relative인데 그아래 3번과 4번이 겹쳐있다. 

보통 absolute를 주면  top left right bottom 값을 별도로 지정하지 않는 이상

x,y축은 변하지 않고 z축만 바뀐다. 한겹 위에서 3번위치에 3번 4번이 겹친 것이다.

 

 

이제 3번과 4번의 absolute의 시작점을 0으로 주면 아래와 같다.

See the Pen css - position - absolute (2) by code_gray (@code_gray) on CodePen.

3번과 4번을 top 0 left 0 을 주게되면 시작점이 브라우저 시작점이라는 것을 알 수 있다. 

( 부모 포지션이 없음으로 브라우저 시작점 )

2번은 relative 로 주었고 top 0 left 0으로 했을 때

static 의 시작점인 1번 박스 밑이 시작점이라는 것을 알 수 있다.

 

 

그럼 부모가 relative 인 경우를 보면 아래와 같이 부모창을 기준으로 0,0 시작위치가 잡히는걸 확인 할 수 있다.

See the Pen css - position - absolute (3) by code_gray (@code_gray) on CodePen.

 

position - fixed

fixed는 내가 정해놓은 그위치 그대로 고정(fix) 된다.

즉 스크롤을 해도 그자리에 계속 고정으로 위치하게 된다.

 

See the Pen css - position - fixed by code_gray (@code_gray) on CodePen.