프로그래밍(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;