[CSS-5] position

1. position

 

문서 상에 요소를 배치하는 방법을 정의.

이 후에 상하좌우 설정을 한다.

static : 기본값, 일반적인 문서 흐름

 

1-1. relative 

 

일반적인 문서 흐름에 따라 배치하되, 상하좌우 위치값에 따라 오프셋을 적용

div {
    position: relative;
    top: 100px;
    left: 100px;
}

=> 원래 위치보다 위에서부터 100px, 왼쪽에서부터 100px 떨어져 있어라!

1-2. absolute 

일반적인 문서 흐름에서 제거하고, 상위 요소 중에서 가장 가까운 position 지정 요소에 대해 상대적으로 오프셋 적용한다.

div {
    position: absolute;
    top: 100px;
    left: 100px;
}

=> 상위 요소를 기준으로 위로 100px, 왼쪽으로 100px 떨어진다

1-3. fixed

일반적인 문서 흐름에서 제거하고, 지정한 위치에 고정시킨다.

div {
    position: fixed;
    top: 100px;
    left: 100px;
}

위에서 100px 왼쪽에서 100px에 떨어진 자리에 고정된다

 

1-4. sticky

일반적인 문서 흐름에서 제거하고, 스크롤 동작이 존재하는 가장 가까운 요소에 대해 오프셋 적용

div {
    position: sticky;
    top: 0px;
}


=> 스크롤 이동을 할때 top에 고정되어 붙어다닌다