CSS position

position 속성은 요소의 위치를 자유롭게 지정 할 수 있습니다.

position: static;
position: relative;
position: absolute;
position: fixed;

기본값:static, 상속:안됨, 버전:CSS2

position:static

top:50px; left:100px; position:static

position:static

position:static  포지션을 지정하지 않은 상태와 동일 합니다.

position:static

top:30px; left:100px; position:relative

position:static

position:relative 자신 있던 자리를 기준으로 공간을 남기고 지정 값 만큼 다른 요소들에게 영향 없이 이동하고 z-index:1을 얻게 됩니다.

position:static

top:10px; right:10px; position:absolute

position:static

position:absolute는 relative와 달리 자신이 있던 자리의 흔적을 남기지 않고, 기준점을 최상위 요소에 둠으로 브라우저 창을 기준으로 위치 값을 잡습니다. 예제는 브라우저 우측 상단에 있습니다.

position:static

top:10px; right:10px; position:absolute

position:static

position:relative  상위 요소에 position:relative 지정하면 지정된 상위 요소를 기준으로 하여 위치합니다.

position:static

top:50px; right:30px; position:fixed

position:static

position:fixed position:absolute 같은 속성에 스크롤에 반응 하지 않고 지정 위치에 계속 남아 있고 position:relative 속성으로 기준점을 잡아 줄 수 없습니다. 예제는 우측 상단에 있습니다.

CSS z-index