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