< 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;

'프로그래밍(Programming) > CSS' 카테고리의 다른 글

CSS 중급 - Flex Layout  (0) 2018.08.22
CSS 중급 - Float Layout  (0) 2018.08.22
CSS 중급 - 상속, Cascading  (0) 2018.08.22
CSS 중급 - css code의 재사용  (0) 2018.08.22
CSS 중급 - 그리드 모델 (Grid model)  (0) 2018.08.22

+ Recent posts