postion 사용법

검은색을 이동시키면서 예를 들어보겠음. 위치는 top, bottom, left, rigt로 움직인다.

예)

.Position_Absolute {

    position: absolute;

    left: 100px;

}

 <div class="Gray_WrapperBox">

        <div class="BlackBox Position_static"></div>

 </div>

기본

Absolute : 1번 요소를 옮기면 그 자리에 2번 요소가 들어온다. 2번 요소도 Absolute시키면 1번을 덮어버린다.

Fixed : 언뜻보면 Absolute랑 비슷하지만 스크롤을 해도 따라온다.

Relative : body의 크기에 상관없이 자신의 부모 태그를 기준으로 적용된다.

Inherit : 보모의 포지션 설정을 따라간다.

static : 걍 기본과 같다. 고정되어 있으므로 left, top등과 같이 움직여줄 수도 없음.