프로그래밍(Programming)/CSS

CSS 중급 - Position Layout

SuperKid 2018. 8. 22. 22:44

< CSS 중급 - Position Layout >


1) position: static; (기본값)

2) position: relative; (자신의 원래 위치 대비 이동)

   top: 40px;

   left: 50px;

3) position: absolute;

   top: 40px;

   left: 50px;

 - 자신의 상위 tag 중 처음으로 나오는 static이 아닌 요소를 찾아서 기준 위치로 삼음.

 - 자신보다 1단계 상위 tag의 position 값을 relative로 주면 그 tag를 기준점으로 움직일 수 있음.

 - 다른 요소들은 절대 위치 요소의 자리로 올라와서 겹쳐 보이게 될 수 있음)

4) position: fixed; (기준점은 absolute 와 동일하게 잡지만 스크롤에 의해 움직여지지 않음)

   top: 40px;

   left: 50px;