[CSS 레이아웃 기본] offset과 position 속성에 대하여 정리

offset의 개념원리

offset은 상대 주소(relative address)의 개념입니다.
상대주소이기 때문에 offset값을 지정해줄 element와 기준이 되어줄 element가 필요합니다.
기준이 되어줄 element는 html태그일 수도 있고, body태그일 수도 있고, 부모 태그일 수도 있고, 상황에 따라 (작성한 코드에 따라) 다를 것입니다.

offset값으로는 top, bottom, left, right이 있습니다.

기준이 되는 element가 있다고 할 때,

그 기준 element의 가장 윗 지점이 top이 0이 되는 지점입니다. 가장 아랫 지점은 bottom이 0이 되는 지점입니다.
가장 왼쪽 지점은 left가 0, 가장 오른쪽 지점은 right가 0이 되는 지점입니다.
여기서 element의 안쪽 방향으로 들어올수록 top,bottom,left,right값은 양수 방향으로 커집니다.
반대로 바깥 방향으로 나갈수록 음수방향으로 커집니다.

기준이 되어줄 element가 있고 offset값을 지정한 element가 있다면 그 element의 가장 윗쪽이면서 가장 왼쪽인 모서리 꼭짓점이 이 offset값에 맞게 위치합니다. 여태까지 글로 풀어서 난해한 감이 있는데, 그림으로 보면 이해가 더 쉽습니다.

* 예시코드

<head>
    <style>
        #aa { position: relative; width: 200px; height: 200px; border: 1px solid black; }
        #bb { position: absolute; width: 100px; height: 100px; border: 1px solid red;
            top: 20px; left:40px; }
    </style>
</head>
<body>
    <div id="aa">
    	<div id="bb"></div>
    </div>
</body>

aa는 기준이 되는 element이고 bb는 offset값을 지정한 element입니다. offset값은 top=20px, left=40px입니다.

position 속성을 이용하면 offset값을 적용할 수 있는데 position 속성에 대해서는 아래에서 또 자세히 살펴보도록 할 것입니다.

결과가 어떻게 되는지 그림을 보죠.

* 결과

이렇게 기준이 될 element에 상대적인 위치를 정하는 것이 offset입니다.

의문점 : top값과 bottom값이 가리키는 위치가 다르면 서로 상충되지 않는가? left와 right도.

예시 코드를 보겠습니다.

<head>
    <style>
        #aa { position: relative; width: 200px; height: 200px; border: 1px solid black; }
        #bb { position: absolute; width: 100px; height: 100px; border: 1px solid red;
            top: 20px; left: 40px; right: 0; bottom: 0; }
    </style>
</head>
<body>
    <div id="aa">
    	<div id="bb"></div>
    </div>
</body>

이런 상황에서는 top값이 bottom값보다 우선순위를 가지고 left값이 right값보다 우선순위를 가집니다. 따라서 예시 코드에서 id=bb인 div태그에 right값과 bottom값은 적용되지 않습니다.