CSS 포지셔닝

1. relative

position:relative

이 코드는 원래 자리를 기준으로 위치를 잡아 포지셔닝 하는 것이다. 겹치게 할 때 유용하게 쓸 수 있다. 이 코드를 쓰면 원래 위치에서 상대적인 곳으로 이동한다. top, bottom, left, right 를 써서 조절할 수 있다.

ex>

position:relative
top:80px
left:30px

 

2.fixed

position:fixed;

fixed포지션은 브라우저를 기준으로 포지셔닝 해준다. top:30px을 하면 브라우저의 위에서 30px을 해준다.

스크롤을 해도 똑같은 자리에 있게 된다.

 

fixed 포지션은 스크롤해도 계속 같은 자리를 유지하고 싶을때 사용한다.

 

3.absolute

요소들은 기본적으로 static포지션이다. (포지셔닝이 안 된 요소)

포지셔닝이 된것은 relative, fixed, absolute포지션이다.

absolute포지셔닝은 가장 가까운 포지셔닝이 된 조상 요소가 기준이다.