절대적 위치좌표 | 상대적 위치좌표 |
부모레이아웃을 기준으로 X좌표와 Y좌표를 이용해 절대적인 위치를 지정할 수 있다. |
동일선상의 레이아웃을 기준으로 X좌표와 Y좌표 또는 margin, padding 값을 이용해 상대적인 위치를 지정할 수 있다. |
position:absolute (절대위치) position:fixed (브라우저 기준 해당 위치 고정) |
position:static(기준) position:relative (상대적으로 위치 지정) |
앞의 강좌에서 position의 속성 중 absolute 를 알아보았습니다.
absolute 속성과 가장 많이 쓰이는 relative 속성을 알아보겠습니다.
absolute 가 절대적인 속성을 가진다면
relative는 상대적인 속성을 가집니다.
박스3개를 모두 relative 하고 2번 박스에 left : 50px; top:50px 을 주어졌을 때
2번 박스는 1번 박스를 기준으로 위의 값만큼 떨어지고
3번 박스는 원래 2번박스가 있던 만큼 아래로 떨어져서 보여진다는 걸
확인할 수 있습니다.
position relative HTML 파일 확인하기
relative 속성이 absolute 속성과 갖는 가장 큰 차이점은
margin 값을 추가할 수 있다는 것입니다.
위의 소스에서 left 는 margin-left, top는 margin-top으로 변경합니다.
좌측, 상단을 일정 값으로 지정했을 때와의 차이점은 영향을 받지 않던 3번 박스가
margin 값으로 바뀌자 2번 박스의 margin 값에 함께 영향을 받는다는 것을 확인할 수 있습니다.