CSS의 position 속성에 대한 내용은 아래 내용을 참고하시기 바랍니다.



또한, static, absolute, realtive, fixed 값에 대한 내용은 아래 그림을 참고하시기 바랍니다.

여기서 relative 값을 지정한 것은 HTML 문서의 좌측 상단을 기준으로 하는 게 아닌,

현재 요소를 감싸고 있는 부모 요소의 위치를 기준으로 top과 bottom이 따로 정의가 되는 것입니다. 




div(layer)의 좌표 체계인 top, bottom, left, right는

사각형의 왼쪽 상단(left, top)과 오른쪽 하단(right, bottom)을 기준으로 width 값을 지정합니다. 위 두번째 그림에서 left와 top의 표현 방법의 반대로 생각해보면 right와 bottom이 정의가 됩니다.

참고하세요.








주세훈 님이 쓰신 원문 글입니다.


1.css 레이어에서 position의 relative 속성이 조금 헷갈립니다.

absolute는 웹 브라우저의 왼쪽 상단을 기준으로 움직인다는 것은 알겠는데...

relative의 기준위치를 잘 모르겠어요.

강사님께서 설명해주시기를 가장 가까운 객체를 기준으로 움직인다고 하셨는데... absolute로 지정한 객체와 아무리 가까워도 그것을 기준으로 삼고 움직이는 것 같지 않더라구요.

그래서 인터넷을 찾아보니까... 정확한 답은 없었지만... 원래의 위치를 기준으로 움직인다고 하는데... 

relative 값의 정확한 기준을 좀 알려주세요

-------------------------------------------------------------------------------------------------
2. 레이어의 clip 속성을 알려주실 때 rect( top, left, bottom, right) 이렇게 알려주셨는데...

여기서 들어가는 top, left, bottm, right의 기준점을 어디로 잡는건가요?

제가 이해한 바로는 top과 left의 위치를 기준점을 잡는 것 같은데... 맞나요? 맞다면 왜 top,left를 기준으로 잡는지 알려주세요

답변 부탁드리겠습니다.