[CSS] position : static, relative, absolute, fixed 정리

1. static (기본위치)

 

static 은 디폴트값으로 기본위치를 나타낸다. 자식요소로써 존재할 경우에는 부모요소를 기준으로 위치한다. 중요한 점은 position:static 일 경우 top, left, right, bottom 같은 좌표속성들을 사용할 수 없다. 

 

 

 

 

2. relative (상대위치)

 

상대적인 위치로써 동작자체는 static 과 거의 같다. 차이점이라면 relative 에서는 좌표속성(top, left, right, bottom)들을 사용할 수 있다.

 

 

 

 

3. absolute (절대위치)

 

static 을 제외한 가장 가까운 부모요소(조상요소) 를 기준으로 좌표속성(top, left, right, bottom) 만큼 이동한다. 즉 부모요소는 relative, absolute, fixed 중 하나가 되야 한다. 만약 부모요소와 조상요소에 static 밖에 없다면 document body 가 기준이 된다. 

 

따라서 absolute 를 이용하려면 부모요소에 relative 를 따로 적용시켜야 부모요소를 기준으로 사용하기 편리하다. 

 

특징은 absolute 끼리 겹칠 수 있다는 것이다 .부모 요소만 relative(또는 다른거) 면 자식요소에 수많 absolute 가 있어도 모두 겹칠 수 있다. 

 

relative 와 absolute 의 차이점은 relative 는 부모요소가 기준이 되고, absolute 는 부모가 조건에 맞지 않으면 기준이 되지 않는다는 것이다. 

 

 

 

 

4. fixed (고정위치)

부모요소와는 상관없이 viewport 기준으로 움직인다. 스크롤이 되더라도 화면에서 사라지지 않고 그 자리에 고정되어 있다. 

 

 

 

5. z-index 

z축을 기준으로 큰 숫자를 쓸 수록 앞에 나온다. 예를 들어 absolute 로 여러개의 div 를 겹쳐놨다고 했을 때 겹쳐진 순서를 정하고 싶으면 z-index: n 형식으로 쓰면 된다. static 을 제외한 position 에서만 작동한다.