CSS 기초 - 포지션(Position)

Position : 위치를 배치하는 속성

position은 4가지로 구성되어 있다.

static, relative, absolute, fixed!

 

1. static

: 정적인 (position의 기본값)

- 위치 속성이 비활성화(움직이지 않음)

#static{
     top: 20px;
     left: 15px;
        }

 

 

 

 

static에 위치값을 넣어줘도 움직이지 않는 결과가 나온다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2. relative

: 상대적인

- 위치 속성이 활성화(움직임)

- 기준 : 원래 있던 위치

(tip! 기준점을 모르겠을 때는 0,0으로 이동해보면 됨)

#relative{
    position: relative;
    top: 20px;
    left: 20px;
        }

 

 

 

 

 

 

위에 있는 사진 위치를 보면

원래 있던 위치를 기준으로 설정한 값이 움직이게 된 걸 볼 수 있다.

 

 

 

 

 

 

 

 

 

3. absolute

: 절대적인

- 위치 속성 활성화(움직임)

- 기준 : position이 static이 아닌 부모

- absolute는 힘이 셈(static은 힘이 밀림) : 레이어 개념으로 static은 뒤에 겹쳐진다.

(tip! 기준점을 모르겠을 때는 0,0으로 이동해보면 됨)

- 부모가 없거나, 부모가 전부 static일 때는 body태그를 기준으로 함

#parents{
   position: relative;
}
#absolute{
   position: absolute;
   top: 50px;
   left: 50px;
}

 

 

 

 

parents 태그 기준으로

50px씩 움직인 걸 볼 수 있다.

보기와 같이 static은 뒤에 겹쳐있다.

 

 

 

 

 

 

 

 

 

 

4. fixed

: 고정적인

- 위치 속성 활성화(움직임)

- 기준 : body태그

- 힘이 제일 셈

- 부모 무시! 스크롤 무시!

(우리가 넷상에서 흔히 보는 스크롤해도 사이드에서 따라오는 광고물들을 생각하면 됨)

#fixed{
   position: fixed;
   top: 20px;
   left: 20px;
}

 

 

 

힘이 제일 세서 static, absolute 들은 뒤로 레이어 된다.